@keyframes rotating-button {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.btn-holder {
    position: relative;
    display: grid;
    place-content: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    interpolate-size: allow-keywords;
    border-radius: .5ch;
    transition: background-color 500ms ease-in-out,
    box-shadow 500ms ease-in-out;

    --color-idle: transparent;
    --color-saved: green;
    --color-pending: orange;
    --color-glitched: rgb(70% 60% 55% / 1);
    --color-error: rgb(60% 20% 30% / 1);

    background-color: var(--color-idle);
    box-shadow: 0 0 2px 2px var(--color-idle);

    &.pending {
        background-color: var(--color-pending);
        box-shadow: 0 0 2px 2px var(--color-pending);
    }

    &.saved {
        background-color: var(--color-saved);
        box-shadow: 0 0 2px 2px var(--color-saved);
    }

    &.glitched {
        background-color: var(--color-glitched);
        box-shadow: 0 0 2px 2px var(--color-glitched);
    }

    &.error {
        background-color: var(--color-error);
        box-shadow: 0 0 2px 2px var(--color-error);
    }

    button {
        position: absolute;
        display: grid;
        place-content: center;
        width: max-content;
        max-width: 15ch;
        min-height: min(3ch, 100%);
        /*height: 0;*/
        font-size: 3ch;
        aspect-ratio: auto;

        &.btn-knob {
            aspect-ratio: 1/1 !important;
            border-radius: 50% !important;
            height: 3ch;
            width: 3ch;
            /*max-height: 5ch;*/
            /*max-width: 5ch;*/
            min-height: min(3ch, 100%);
            position: absolute;
        }
    }
}

button.activated {
    border-radius: 50% !important;
    box-shadow: unset;
    aspect-ratio: 1/1 !important;
    height: auto;
    animation: rotating-button .5s ease-in-out infinite;
}

button {
    color: var(--button-green-color);
    background-color: var(--button-background-color);
    border: var(--button-border);
    border-radius: .5ch;
    padding: .25ch;
    height: 0;
    min-height: clamp(3ch, 100%, 5ch);
    display: grid;
    place-content: center;

    box-shadow: inset -2px -2px 4px 1px var(--button-shadow);
    transition: border-radius 1000ms ease-in-out,
    box-shadow 1000ms ease-in-out,
    height 1000ms ease-in-out,
    opacity 1000ms ease-in-out,
    aspect-ratio 1000ms ease-in-out;

    & > svg {
        /* ignore the icons, make sure it is the button that gets the click */
        pointer-events: none;
    }
}

button.blue-info {
    background-color: rgb(20% 60% 100% / 1);
    box-shadow: inset -2px -2px 4px 1px rgb(30% 80% 100% / 1);
    border: 1px solid rgb(10% 40% 60% / 1);
}

/* unfuck google maps */
.gm-style button {
    min-height: unset;
    box-shadow: unset;
    transition: unset;
}