Zelda64Recomp/assets/scss/styles/components/Toggle.scss

@use "sass:math";

$toggle-width: 162;
$toggle-height: 72;

$toggle-floater-width: 80;
$toggle-floater-height: 64;
$toggle-floater-margin: 4;
$toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-floater-width;

.toggle {
    @extend %nav-all;
    @include trans-colors-opa;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: space($toggle-width);
    height: space($toggle-height);
    border-radius: space(math.div($toggle-height, 2));
    opacity: 0.9;
    background: $color-transparent;
    cursor: pointer;

    &:hover, &:focus-visible, &:focus {
        opacity: 1;
        background-color: $color-secondary-a30;
    }

    &:active {
        opacity: 1;
        background-color: $color-secondary-a5;
    }

    .toggle__border {
        @include inner-border-block($color-secondary-l);
        border-radius: space(math.div($toggle-height, 2));
    }

    .toggle__floater {
        position: absolute;
        top: 50%;
        left: space($toggle-floater-margin);
        width: space($toggle-floater-width);
        height: space($toggle-floater-height);
        transform: translateY(-50%);
        border-radius: space(math.div($toggle-floater-height, 2));
        background: $color-secondary-d;
    }
    
    &--checked {
        .toggle__floater {
            left: space($toggle-checked-left-offset);
        }

        .toggle__icon {
            &.toggle__icon--left {
                opacity: 0.9;
                color: $color-secondary-l;
            }

            &.toggle__icon--right {
                opacity: 1.0;
                color: $color-text;
            }
        }
    }
}

.toggle__icons {
    display: flex;
    position: absolute;
    top: 50%;
    right: space(16);
    left: space(16);
    align-items: center;
    justify-content: space-between;
    height: space(56);
    transform: translateY(-50%);
}

.toggle__icon {
    @extend %prompt-font-lg;
    @include trans-colors;
    display: flex;
    align-items: center;
    justify-content: center;
    width: space(56);
    height: space(56);
    color: $color-text;

    &--right {
        opacity: 1;
        color: $color-secondary-l;
    }
}