@import "../style-scss/import";

.mu-radio {
    position: relative;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    user-select: none;
    input[type="radio"] {
        display: none;
        &:checked {
            + .mu-radio-wrapper {
                .mu-radio-icon-uncheck {
                    opacity: 0;
                    transform: scale(0);
                    color: $primaryColor;
                }
                .mu-radio-icon-checked {
                    opacity: 1;
                    transform: scale(1);
                }
                .mu-radio-ripple-wrapper {
                    color: $primaryColor;
                }
            }
        }
    }

    * {
        pointer-events: none;
    }

    &.disabled {
        cursor: not-allowed;
    }
}

.mu-radio-wrapper {
    display: flex;
    width: 100%;
    height: 24px;
    align-items: center;
    justify-content: space-between;
}

.mu-radio-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    position: relative;
    margin-right: 16px;
    .mu-radio.label-left & {
        margin-right: 0;
        margin-left: 16px;
    }
    .mu-radio.no-label & {
        margin-left: 0;
        margin-right: 0;
    }
}

.mu-radio-label {
    color: $textColor;
    flex: 1;
    font-size: 16px;
    .mu-radio.disabled & {
        color: $disabledColor;
    }
}

.mu-radio-svg-icon {
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
    user-select: none;
}

.mu-radio-icon-uncheck {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    transition: all 450ms $easeOutFunction;
    color: $textColor;
    .mu-radio.disabled & {
        color: $disabledColor;
    }
}

.mu-radio-icon-checked {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    color: $primaryColor;
    transform: scale(0);
    transition: all 450ms $easeOutFunction;
    .mu-radio.disabled & {
        color: $disabledColor;
    }
}

.mu-radio-ripple-wrapper {
    width: 48px;
    height: 48px;
    top: -12px;
    left: -12px;
    .mu-radio.label-left & {
        right: -12px;
        left: auto;
    }
}