@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;

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

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

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

button {
    color: var(--button-green-color);
    background-color: var(--button-background-color);
    border: var(--button-border);
    border-radius: .5rem;
    padding: .8rem .5rem;
    height: 0;
    min-height: 100%;

    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;
}

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