$hover-opacity: 0.08;
$ripple-focus-opacity: 0.2;

@mixin switch() {
    $thumbPadding: 9px;
    $rippleSize: 9px;
    $track-w: 34px;
    $track-h: 14px;
    $track-center: calc(50% - 7px);
    $thumb-center: calc(50% - 10px);

    .switch-label {
        display: inline-flex;
        align-items: center;
        line-height: 0;
        user-select: none;
        cursor: pointer;
    }

    .switch {
        direction: rtl;
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        overflow: hidden;
        cursor: pointer;
        line-height: 0;
        z-index: 0;
        user-select: none;
        padding: 0 12px 0 0;

        input {
            top: 0;
            left: 0;
            width: 100%;
            cursor: inherit;
            height: 100%;
            margin: 0;
            opacity: 0;
            padding: 0;
            z-index: 2;
            position: absolute;

            &:checked + span + span {
                transform: translateX(20px);
            }
        }

        &.bd-compact {
            margin-top: -2px;
            margin-bottom: -2px;

            @include marginEnd(-4px);
        }

        &.edge-start {
            @include marginStart(-$rippleSize);
        }

        &.edge-end {
            @include marginEnd(-$rippleSize);
        }

        .ripple-base .ripple-focus {
            opacity: $ripple-focus-opacity;
        }
    }

    .switch-track {
        display: inline-block;
        width: $track-w;
        height: $track-h;
        border-radius: $track-h * 0.5;
        background-color: currentColor;
        opacity: 0.4;
        z-index: 0;
    }

    .switch-thumb {
        position: relative;
        overflow: hidden;
        $thumb-size: 20px;
        display: inline-block;
        width: $thumb-size + $thumbPadding * 2;
        height: $thumb-size + $thumbPadding * 2;
        margin-right: -$thumb-size - $thumbPadding + 3;
        border-radius: 50%;
        z-index: 1;
        transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

        &:before {
            content: "";
            position: absolute;
            left: $thumbPadding;
            top: $thumbPadding;
            right: $thumbPadding;
            bottom: $thumbPadding;
            border-radius: inherit;
            background-color: currentColor;
            box-shadow: $bd-shadow-1;
        }
    }

    .switch-sm input + span {
        width: 26px;
        height: 10px;
    }

    .switch-sm input + span + span {
        $thumb-size: 16px;
        width: $thumb-size + $thumbPadding * 2;
        height: $thumb-size + $thumbPadding * 2;
        margin-right: -$thumb-size - $thumbPadding + 3;
    }

    .switch-sm input:checked + span + span {
        transform: translateX(16px);
    }

    .switch.disabled {
        opacity: 0.4;
        cursor: default;

        &:hover .switch-thumb {
            box-shadow: $bd-shadow-1 !important;
        }
    }
}

@mixin switchTheme($palette) {
    $text-primary: map-deep-get($palette, text, primary);
    $bg: map-deep-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $primary: map-get($primary-palette, main);

    $secondary-palette: map-get($palette, secondary);
    $secondary: map-get($secondary-palette, main);

    .switch input {
        & + span {
            color: $text-primary;
        }

        & + span + span {
            color: if(luminance($bg) > 0.5, $white, darken($white, 26));
        }
    }

    .switch:hover input + span + span {
        background-color: rgba($text-primary, $hover-opacity);
    }

    .switch-primary input:checked {
        & + span,
        & + span + span {
            color: $primary;
        }
    }

    .switch-primary:hover input:checked + span + span {
        background-color: rgba($primary, $hover-opacity);
    }

    .switch-secondary input:checked {
        & + span,
        & + span + span {
            color: $secondary;
        }
    }

    .switch-secondary:hover input:checked + span + span {
        background-color: rgba($secondary, $hover-opacity);
    }
}

@include switch();

.theme-bd.theme-light {
    $palette: map-get($theme, light);
    @include switchTheme($palette);
}

.theme-bd.theme-dark {
    $palette: map-get($theme, dark);
    @include switchTheme($palette);
}