@import 'commons';
$m-radio--width: 17px !default;
$m-radio--color-disabled: $m-color-disabled !default;

.m-radio {
    user-select: none;
    line-height: 1.2;
    list-style: none;
    padding-left: 0;
    display: inline;

    &:not(.m--is-disabled):not(.m--is-readonly) {
        &:not(.m--is-error):not(.m--is-valid) {

            .m-radio__wrap:hover,
            &.m--is-focus {
                .m-radio__input {
                    border-color: $m-color-interactive;
                    background: $m-color-interactive-lightest;
                }
            }

            &.m--is-focus {
                .m-radio__input {
                    box-shadow: 0 0 2px $m-color-interactive;
                    outline: 1px solid $m-color-interactive;
                }
            }
        }

        &.m--is-error {
            .m-radio__input {
                border-color: $m-color-error;

                &::before {
                    background: $m-color-error;
                }
            }

            .m-radio__wrap:hover,
            &.m--is-focus {
                .m-radio__input {
                    background: $m-color-error-lightest;
                }
            }

            &.m--is-focus {
                .m-radio__input {
                    box-shadow: 0 0 2px $m-color-error;
                    outline: 1px solid $m-color-error;
                }
            }
        }

        &.m--is-valid {
            .m-radio__input {
                border-color: $m-color-success;

                &::before {
                    background: $m-color-success;
                }
            }

            .m-radio__wrap:hover,
            &.m--is-focus {
                .m-radio__input {
                    background: $m-color-success-lightest;
                }
            }

            &.m--is-focus {
                .m-radio__input {
                    box-shadow: 0 0 2px $m-color-success;
                    outline: 1px solid $m-color-success;
                }
            }
        }

        &:not(.m--is-checked) {
            .m-radio__wrap {
                cursor: pointer;
            }
        }

        .m-radio {
            &__label {
                transition: color $m-transition-duration ease;
                color: $m-color-text;
            }

            &__input {
                border-color: $m-color-black;
                color: $m-color-black;
            }
        }
    }

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

            &__input {
                border-color: $m-color-disabled;
            }

            &__label {
                color: $m-color-disabled;
                background: $m-color-white;
                border-color: $m-color-disabled;
            }
        }

        &.m--is-checked {
            .m-radio__input {
                &::before {
                    background: $m-color-disabled;
                }
            }
        }
    }

    &.m--is-readonly {
        .m-radio {
            &__wrap {
                cursor: default;
            }

            &__input {
                border-color: $m-color-disabled;
            }
        }

        &.m--is-checked {
            .m-radio__input {
                &::before {
                    background: $m-color-disabled;
                }
            }
        }
    }

    &.m--is-checked {
        .m-radio {
            &__wrap {
                cursor: default;
            }

            &__input {
                &::before {
                    visibility: visible;
                    transform: scale(1);
                }
            }
        }
    }

    &.m--is-input-right {
        .m-radio {
            &__wrap {
                flex-direction: row-reverse;
            }

            &__label {
                padding-right: $m-space-xs;
            }
        }
    }

    &:not(.m--is-input-right) {
        .m-radio__label {
            padding-left: $m-space-xs;
        }
    }

    &.m--is-align-center {
        .m-radio__wrap {
            align-items: center;
        }
    }

    &:not(.m--is-align-center) {
        .m-radio__wrap {
            align-items: flex-start;
        }
    }

    .m-radio {
        &__wrap {
            display: inline-flex;
            align-items: center;
        }

        &__input {
            transition: background $m-transition-duration ease, border-color $m-transition-duration ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: $m-radio--width;
            height: $m-radio--width;
            background: $m-color-white;
            border-width: 1px;
            border-style: solid;
            border-radius: 50%;
            z-index: 1;

            &::before {
                transition: transform $m-transition-duration ease-out;
                content: '';
                display: block;
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                background: $m-color-interactive;
                border-radius: 50%;
                visibility: hidden;
                transform: scale(0);
            }
        }

        &__label {
            flex: 1;
        }
    }

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