@tailwind utilities;

@layer utilities {
    .-state {
        @apply -relative -cursor-pointer;
    }
    .-state::before {
        @apply -block -absolute -inset-0 -ease-in-out -duration-200 -opacity-0 -pointer-events-none /*--z-[1]*/;
        background: var(--state-color);
        content: ' ';
        border-radius: inherit;
        transform: scale(var(--state-scale));
        transition-property: opacity, transform, box-shadow, background-color;
    }
    .-state.active:not(:hover,:focus-visible,:focus-within,:active):before {
        opacity: var(--state-active-opacity, 0);
        background: var(--state-active-color, var(--state-color));
        @apply -scale-100 -duration-700 -shadow-inner;
    }
    .-state.selected:not(:hover,:focus-visible,:focus-within,:active):before {
        opacity: var(--state-selected-opacity, .1);
        background: var(--state-selected-color, var(--state-scale));
        @apply -scale-100;
    }
    .-state:focus-visible {
        @apply -outline-none;
    }
    .-state:hover::before,
    .-state:active::before,
    .-state:focus-visible::before {
        @apply -scale-100;
    }
    .-state:hover::before {
        opacity: var(--state-hover-opacity, 1);
    }
    .-state:active::before {
        background: var(--state-pressed-color, var(--state-color));
        opacity: var(--state-pressed-opacity, .6);
        --tw-ring-color: var(--state-ring-color, currentColor);
        @apply -ring -duration-700;
    }
    .-state:focus-visible::before {
        background: var(--state-focus-color, var(--state-color));
        opacity: var(--state-focus-opacity, 1);
        @apply -ring -ring-focus;
    }
    .-state[disabled]::before,
    .-state.disabled::before {
        @apply -hidden;
    }
}

.btn,
.item > a,
.state {
    @apply -state;
}

.btn {
  --state-active-opacity: 1;
}

@-moz-document url-prefix() {
    :root, .btn {
        --state-active-opacity: 0;
        --state-focus-opacity: 0;
    }
}
