$width: 48px;
$height: 22px;
$size: 12px;
$padding: ($height - $size) / 2;

.switch {
    @include flex(row, flex-start, flex-end);
    @include size($width, $height);
    @include hover_effect(--c-background-secondary);
    box-shadow: inset 0 0 2px rgba(black, 0.04);
    border-radius: $height;
    justify-self: flex-end;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;

    &::before {
        @include pseudo();
        @include size($size);
        background: var(--c-text-primary-accent);
        box-shadow: 0 1px 4px rgba(black, 0.15);
        border-radius: 100%;
        transition: all 0.3s;
        top: $padding;
        left: $padding;
    }

    &[data-state='on'] {
        @include hover_effect(--c-primary);

        &::before {
            transform: translateX($width - $height);
        }
    }

    &[data-state='intermediate'] {
        @include disabled;
        background: var(--c-yellow);

        &::before {
            transform: translateX(($width - $height) / 2);
        }
    }

    &[data-state='on'],
    &[data-state='intermediate'] {
        &::before {
            background: var(--c-text-secondary);
        }
    }
}
