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

$b: '.toggle';

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

    &__input {
        background-color: $toggle-bg;
        border: $toggle-border-width solid $toggle-border-color;
        border-radius: $toggle-radius;
        cursor: pointer;
        flex-shrink: 0;
        height: 4px * 6;
        position: relative;
        transition-duration: var(--duration-micro-m);
        transition-property: background-color, border-color;
        transition-timing-function: var(--easing-standard);
        width: 4px * 12;

        #{$b}__label + & {
            margin-left: 4px * 3;
        }

        :disabled ~ & {
            background-color: $toggle-disabled-bg;
            border-color: $toggle-disabled-border-color;
            cursor: default;
        }

        :checked ~ & {
            background-color: $toggle-active-bg;
            border-color: $toggle-active-border-color;
        }

        :checked:disabled ~ & {
            background-color: $toggle-active-disabled-bg;
            border-color: $toggle-active-disabled-border-color;
        }

        &::before {
            background-color: $toggle-check-color;
            border-radius: $toggle-check-radius;
            content: '';
            height: 4px * 5;
            left: 1px;
            position: absolute;
            top: 1px;
            transition-duration: var(--duration-micro-m);
            transition-property: background-color, transform;
            transition-timing-function: var(--easing-standard);
            width: 4px * 5;

            :disabled ~ & {
                background-color: $toggle-disabled-check-color;
            }

            :checked ~ & {
                background-color: $toggle-active-check-color;
                transform: translateX(24px);
            }

            :checked:disabled ~ & {
                background-color: $toggle-active-disabled-check-color;
            }
        }
    }

    &__label {
        color: $toggle-label-color;
        margin-left: 4px * 3;

        @include font($toggle-label-font);
    }
}