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

@mixin toggle() {
    $rippleSize: 0.5rem;

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

    .toggle {
        position: relative;
        overflow: hidden;
        padding: $rippleSize;
        border-radius: 50%;
        font-size: 24px;

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

            & + span + span,
            &:checked + span {
                display: none;
            }

            & + span,
            &:checked + span + span {
                display: inline-block;
            }
        }

        svg {
            font-size: inherit;
        }

        &.bd-compact {
            padding: 7px;

            @include marginEnd(-2px);
        }

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

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

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

    .disable-ripple {
        .toggle {
            padding: 0;

            &:hover {
                background-color: transparent !important;
            }
        }
        .toggle-text {
            @include paddingStart(4px);
        }
    }

    .toggle-sm {
        font-size: 20px;
    }

    .toggle-lg {
        font-size: 32px;
    }

    .toggle-xl {
        font-size: 45px;
    }

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

        &:hover {
            background-color: transparent !important;
        }
    }
}

@mixin toggleTheme($palette) {
    $text-primary: map-get($palette, text, primary);
    $bg: map-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);

    .toggle {
        color: mix($text-primary, $bg, 75);

        span:nth-child(2) {
            color: mix($text-primary, $bg, 75) !important;
        }

        &:hover {
            background-color: rgba($text-primary, $hover-opacity);
        }
    }

    .toggle-primary {
        color: $primary;

        &:hover {
            background-color: rgba($primary, $hover-opacity);
        }
    }

    .toggle-secondary {
        color: $secondary;

        &:hover {
            background-color: rgba($secondary, $hover-opacity);
        }
    }
}

@include toggle();

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

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