@use '../../variables' as *;

$b: '.checkbox';

#{$b} {
    align-items: baseline;
    display: inline-flex;

    &__input {
        align-items: center;
        background-color: $checkbox-bg;
        border: $checkbox-border-width solid $checkbox-border-color;
        border-radius: $checkbox-radius;
        cursor: pointer;
        display: flex;
        flex-shrink: 0;
        height: $checkbox-size;
        justify-content: center;
        position: relative;
        transition-duration: var(--duration-micro-s);
        transition-property: background-color, border-color;
        transition-timing-function: var(--easing-standard);
        width: $checkbox-size;

        &::before {
            border-bottom: 3px solid $checkbox-check-color;
            border-left: 3px solid $checkbox-check-color;
            content: '';
            height: 6px;
            margin-top: -2px;
            opacity: 0;
            position: absolute;
            transform: rotate(-50deg);
            transition-duration: var(--duration-micro-s);
            transition-property: opacity;
            transition-timing-function: var(--easing-acceleration);
            width: 10px;
        }

        :focus-visible + & {
            background-color: $checkbox-active-bg;
            border-color: $checkbox-active-border-color;
        }

        :disabled + & {
            background-color: $checkbox-disabled-bg;
            border-color: $checkbox-disabled-border-color;
            cursor: default;
        }

        :checked + &::before {
            opacity: 1;
            transition-timing-function: var(--easing-deceleration);
        }

        :checked:disabled + &::before {
            opacity: 0.5;
        }

        &_square {
            &::before {
                background-color: $checkbox-check-color;
                border-bottom-style: none;
                border-left-style: none;
                border-radius: 1px;
                height: 10px;
                margin-top: 0;
                transform: none;
                width: 10px;
            }
        }
    }

    &__label {
        color: $checkbox-label-color;
        cursor: pointer;
        display: flex;
        flex-basis: 100%;
        flex-direction: column;
        margin-left: 4px * 2;
        position: relative;
        top: -2px;
        transition-duration: var(--duration-micro-s);
        transition-property: color;
        transition-timing-function: var(--easing-standard);

        @include font($checkbox-label-font);

        :disabled ~ & {
            color: $checkbox-disabled-label-color;
            cursor: default;
        }
    }
}