.container {
    cursor: pointer;
    isolation: isolate;
    z-index: 1;

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

.checkbox {
    box-shadow: inset 0 0 0 var(--solid-inset-color-brand);
    border-color: var(--neutral-border-medium);
    border-style: solid;
    border-width: 1px;
    border-radius: min(var(--static-space-4), var(--radius-xs));
    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-property) var(--transition-duration-micro-medium) var(--transition-timing-function);
    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);
    }
}

.container:hover .checkbox::before,
.checkbox: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-999);
    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;
}

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

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