@import "../var.scss";

$j-prefix-toggle: "#{$j-prefix}-toggle" !default;
$j-prefix-toggle-input: "#{$j-prefix}-toggle-input" !default;
$j-prefix-toggle-wrapper: "#{$j-prefix}-toggle-wrapper" !default;
$j-prefix-toggle-label: "#{$j-prefix}-toggle-label" !default;
$j-prefix-toggle-input: "#{$j-prefix}-toggle-input" !default;
$j-prefix-toggle-track: "#{$j-prefix}-toggle-track" !default;

.#{$j-prefix-toggle} {
    display: flex;
    position: relative;
    user-select: none;

    > *:not(:last-child) {
        margin-right: 6px;
    }

    .#{$j-prefix-toggle-input} {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        cursor: pointer;

        &:checked + .#{$j-prefix-toggle-wrapper} {
            background: $j-blue-dark;
            border-color: $j-blue-dark;

            .#{$j-prefix-toggle-track} {
                left: calc(100% - 19px);
            }
        }

        &:disabled + .#{$j-prefix-toggle-wrapper} {
            opacity: 0.4;
        }

        &:disabled + .#{$j-prefix-toggle-wrapper} + .#{$j-prefix-toggle-label} {
            opacity: 0.4;
        }
    }

    &[disabled] {
        .#{$j-prefix-toggle-wrapper} {
            opacity: 0.4;
        }

        .#{$j-prefix-toggle-label} {
            opacity: 0.4;
        }
    }

    &:hover {
        .#{$j-prefix-toggle-input}:not(:checked):not(:disabled) {
            + .#{$j-prefix-toggle-wrapper} {
                background: #fafafa;
            }
        }
    }

    .#{$j-prefix-toggle-wrapper} {
        position: relative;
        width: 40px;
        height: 22px;
        border-radius: 12px;
        background: #ffffff;
        transition: all 0.2s ease-in-out;
        flex-shrink: 0;
        border: 1px solid rgba(163, 162, 161, 0.5);
    }

    .#{$j-prefix-toggle-track} {
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background: #ffffff;
        border: 1px solid rgba(163, 162, 161, 0.3);
        box-sizing: border-box;
        border-radius: 100%;
        transition: all 0.2s ease-in-out;
    }
}