@import 'commons';
$m-switch-size: 28px;

.m-switch {
    &:not(.m--is-disabled):not(.m--is-waiting) {
        .m-switch__body {
            cursor: pointer;
        }

        &:hover,
        &.m--is-focus {
            .m-switch__input {
                color: $m-color-interactive;
            }
        }

        &.m--is-focus {
            .m-switch__input {
                box-shadow: 0 0 2px currentColor;
                outline: 1px solid currentColor;
            }
        }

        &.m--is-checked {
            .m-switch__input {
                color: $m-color-interactive;
                background-color: $m-color-interactive;
            }

            .m-switch__button {
                left: calc(100% - #{$m-switch-size} + 1px);
            }

            .m-switch__text {
                color: $m-color-white;
                left: 2px;
            }
        }

        &.m--has-error {
            .m-switch__input {
                color: $m-color-error;
                background: $m-color-error-lightest;
            }

            &.m--is-checked {
                .m-switch__input {
                    background: $m-color-error;
                }
            }
        }

        &.m--is-valid {
            .m-switch__input {
                color: $m-color-success;
                background: $m-color-success-lightest;
            }

            &.m--is-checked {
                .m-switch__input {
                    background: $m-color-success;
                }
            }
        }
    }

    &.m--is-disabled,
    &.m--is-waiting {
        .m-switch__input {
            border-color: $m-color-disabled;
            background: $m-color-disabled-light;
        }
    }

    &.m--is-disabled {
        .m-switch__body {
            cursor: default;
        }
    }

    &.m--is-waiting {
        .m-switch__body {
            cursor: wait;
        }
    }

    &.m--is-switch-left {
        .m-switch__label {
            padding-left: $m-space-xs;
        }
    }

    &.m--is-switch-right {
        .m-switch__body {
            flex-direction: row-reverse;
        }

        .m-switch__label {
            padding-right: $m-space-xs;
        }
    }

    &.m--no-state-text {
        .m-switch__input {
            min-width: 40px;
        }
    }

    &__body {
        display: inline-flex;
        align-items: center;
    }

    &__input {
        transition-property: color, box-shadow, border-color;
        transition-duration: $m-transition-duration;
        transition-timing-function: ease;
        position: relative;
        display: inline-flex;
        width: 56px;
        height: $m-switch-size;
        color: $m-color-grey-dark;
        background: $m-color-grey-lighter;
        border: $m-border-width-sm solid currentColor;
        border-radius: $m-switch-size/2;
    }

    &__button {
        transition: border-color $m-transition-duration ease, left $m-transition-duration ease-in-out;
        position: absolute;
        top: -1px;
        left: -1px;
        z-index: 2;
        display: block;
        border-radius: 2rem;
        border: $m-border-width-sm solid currentColor;
        width: $m-switch-size;
        height: $m-switch-size;
        background-color: $m-color-white;

        @include m-font-size('xs');
    }

    &__text {
        transition: color $m-transition-duration ease, left $m-transition-duration ease-in-out;
        position: absolute;
        left: calc(100% - #{$m-switch-size});
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - #{$m-switch-size});
        height: 100%;
        color: currentColor;
        font-size: 9px;
        font-weight: $m-font-weight-semi-bold;
        line-height: 0;
        text-align: center;
        text-transform: uppercase;
        user-select: none;
    }

    &__label {
        transition: $m-transition-duration color ease;
        flex: auto;
    }

    &__hidden {
        @include m-visually-hidden;
    }
}