.container {
    cursor: var(--cursor-interactive);
    isolation: isolate;

    &:hover, &:focus {
        .element.checked .element::before {
            display: none;
        }
    }
}

.element {
    box-shadow: inset 0 0 0 var(--solid-inset-color-brand);
    border-color: var(--solid-border-color-neutral);
    border-style: solid;
    border-width: 1px;
    width: var(--static-space-20);
    height: var(--static-space-20);
    min-width: var(--static-space-20);
    min-height: var(--static-space-20);
    transition: var(--transition-micro-medium);
    background-color: var(--background-surface);
    outline: none;

    &.checked {
        box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-brand);
        background-color: var(--brand-solid-medium);
        border-color: var(--solid-border-color-brand);
    }
}

.disabled {
    .element {
        opacity: 0.6;
    }

    .element::before {
        display: none;
    }
}

.container:hover .element::before,
.element:focus-within::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--static-space-40);
    height: var(--static-space-40);
    background-color: var(--brand-alpha-medium);
    border-radius: var(--radius-full);
    z-index: -1;
    animation: scaleInCenter 0.2s forwards;
}

@keyframes scaleInCenter {
    from {
        transform: translate(-50%, -50%) scale(0);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

.icon {
    animation: scaleIn 0.2s forwards;
    animation-delay: 0.1s;
    transform: scale(0);
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.indeterminate {
    background: var(--brand-on-solid-strong);
    width: var(--static-space-12);
    height: var(--static-space-2);
}