button,
.button {
    @apply relative inline-flex items-center cursor-pointer gap-2 rounded-md h-11 px-4 text-lg font-medium;
    @apply outline-0 outline-transparent outline-offset-0;
    @apply focus:outline-2 focus:outline-offset-2 focus:outline-cyan-600;
    transition: border-color 125ms ease-in-out, outline 125ms ease-in-out;
    --button-border: var(--color-primary);
    --button-accent: var(--color-primary-hover);


    &.button--primary {
        @apply bg-cyan-400 border-md border-solid focus:border-primary;
        border-color: var(--button-border);
        box-shadow: 2.5px 2.5px 0 0 var(--button-border);

        &:hover {
            @apply bg-cyan-500;
            border-color: var(--button-accent);
        }

        &:active {
            left: 2.5px;
            top: 2.5px;
        }
    }

    &.button--secondary {
        @apply bg-white border-md border-solid;
        border-color: var(--button-border);
        --button-border: var(--color-gray-400);
        --button-accent: var(--color-gray-100);

        &:hover {
            @apply bg-gray-100;
        }
    }

    &.button--tertiary {
        @apply px-0;

        &:hover {
            @apply underline decoration-[1.5px] underline-offset-3;
        }
    }

    &.button--danger {
        @apply bg-red-500 font-bold;
        --button-accent: var(--color-red-900);

        &:hover {
            @apply bg-red-600;
        }
    }

    &.button--icon {
        @apply justify-center p-0 h-12 top-px rounded-blob;
        aspect-ratio: 1 / 1;

        &:hover {
            background-color: rgba(0, 0, 0, 0.075);
        }
    }

    &.button--sm {
        @apply text-base px-2 h-8;
    }
}

/* button groups are used with labels/checks as well as regular buttons */
.button-group {
    @apply relative flex flex-row items-center p-0 m-0 h-11 max-h-11 rounded-md;
    box-shadow: 2.5px 2.5px 0 0 var(--color-primary);

    > label,
    > button {
        @apply relative flex items-center justify-center h-full pl-3.5 pr-3 cursor-pointer;
        @apply border-md border-primary border-l-0 font-medium rounded-none;
        transition: outline 125ms ease-in-out;
        box-shadow: var(--shadows);
        --shadows: none;

        &:hover {
            @apply bg-cyan-200;
        }

        &:has(input:checked),
        &:active {
            @apply bg-cyan-400 border-r-transparent;
            top: 2.5px;
            --shadows: var(--shadow-checked);

            &:hover {
                @apply bg-cyan-500;
            }

            + label,
            + button {
                --shadows: var(--shadow-sibling);
            }
        }

        &:has(input:checked) {}

        &:first-of-type {
            @apply rounded-l-md border-l-md;

            &:has(input:checked),
            &:active {
                --shadows: var(--shadow-active);
            }

            &:focus,
            &:active {
                box-shadow:
                    0 0 0 2px var(--color-white),
                    0 0 0 4px var(--color-cyan-600),
                    var(--focus-ring);
                --focus-ring: ;
            }
        }

        &:last-of-type {
            @apply border-r-md rounded-r-md;

            &:has(input:checked),
            &:active {
                @apply border-r-primary;
            }
        }
    }

    > label {
        > input[type="radio"] {
            @apply hidden absolute top-0 left-0 w-0 h-0 max-w-0 max-h-0;
        }
    }

    &:has(> label:last-of-type input:checked),
    &:has(> label:last-of-type:active) {
        box-shadow: 1.5px 4.5px 0 -2px var(--color-primary);
    }

    /* small */
    &.button-group--sm {
        @apply h-9 max-h-9 text-sm;
    }
}