@use '~@/style/globals';
@use 'sass:color';

$size: 1.7rem;

.SwitchToggle {
    display: inline-flex;
    align-items: center;

    &__slide {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: $size * 2.2;
        height: $size;
        border-radius: $size;
        background: globals.$bg-color-side-nav;
        cursor: pointer;
    }

    &__button {
        flex: 0 0 auto;
        width: $size;
        height: $size;
        border-radius: 50%;
        background: globals.$bg-color-button-default;
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.5);
    }

    &:hover {
        .SwitchToggle__slide {
            background-color: color.adjust(globals.$bg-color-side-nav, $lightness: 5%);
        }

        .SwitchToggle__button {
            background-color: color.adjust(globals.$bg-color-button-default, $lightness: 8%);
        }
    }

    &__label {
        flex: 1;
        margin-left: 0.5rem;

        &__locked {
            margin-left: globals.$content-padding-small-horizontal;
            font-style: italic;
        }
    }

    &--enabled {
        .SwitchToggle__slide {
            flex-direction: row-reverse;
        }

        .SwitchToggle__button {
            background-color: globals.$bg-color-button-success;
        }

        &:hover {
            .SwitchToggle__button {
                background-color: color.adjust(globals.$bg-color-button-success, $lightness: 5%);
            }
        }
    }

    &--locked {
        .SwitchToggle__slide,
        .SwitchToggle__button {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &:hover {
            .SwitchToggle__slide {
                background: globals.$bg-color-side-nav;
            }

            .SwitchToggle__button {
                background: globals.$bg-color-button-default;
            }
        }
    }
}
