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

.m-radio-style {
    display: inline-flex;
    align-items: center;
    outline: none;

    &:not(.m--is-disabled) {
        cursor: pointer;

        &:hover,
        &.m--is-focus {
            .m-radio-style {
                &__input {
                    border-color: $m-color-interactive;
                    background: $m-color-interactive-lightest;
                }

                &__label {
                    color: $m-color-interactive;
                }
            }
        }

        &:active {
            .m-radio-style {
                &__input {
                    border-color: $m-color-interactive-dark;
                }

                &__label {
                    color: $m-color-interactive-dark;
                }
            }
        }
    }

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

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

            &__label {
                color: $m-color-disabled;
            }
        }

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

    &:not(.m--is-input-right) {
        .m-radio-style {
            &__input {
                margin-right: $m-space-xs;
            }
        }
    }

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

        .m-radio-style {
            &__input {
                margin-left: $m-space-xs;
            }
        }
    }

    &.m--is-checked {
        .m-radio-style__input {
            &::before {
                transform: scale(1);
                visibility: visible;
            }
        }
    }

    &.m--is-full-width {
        width: 100%;
    }

    &__input {
        transition: background $m-transition-duration ease, border-color $m-transition-duration ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        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;
            background: $m-color-interactive;
            border-radius: 50%;
            visibility: hidden;
            transform: scale(0);
            width: calc(100% - 4px);
            height: calc(100% - 4px);
        }
    }

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