@inkline/inkline/components/IRadio/style.scss

@import '../../css/variables';
@import '../../css/mixins';
@import '../../css/icons';
@import 'css/variables';
@import 'css/colors';
@import 'css/sizes';

.radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    margin-right: var(----margin-right);

    &:last-child {
        margin-right: 0;
    }

    input {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 0; // Put the input behind the label so it doesn't overlay text
        opacity: 0;
        height: 0;
        width: 0;

        &:focus,
        &:active {
            outline: none;
        }

        &:checked {
            ~ .radio-label {
                &::before {
                    ----border-color: var(----border-color--checked);
                    ----background: var(----background--checked);
                }

                &::after {
                    content: '';
                    mask-image: url($ink-circle);
                    mask-position: center center;
                    mask-repeat: no-repeat;
                }
            }
        }

        &:disabled,
        &[readonly] {
            ~ .radio-label {
                ----label--color: var(----label--color--disabled);
            }

            &:checked {
                ~ .radio-label {
                    &::before {
                        ----border-color: var(----border-color--checked-disabled);
                        ----background: var(----background--checked-disabled);
                    }

                    &::after {
                        ----background: var(----color--disabled);
                    }
                }
            }
        }
    }

    .radio-label {
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        position: relative;
        transition-property: color;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-easing);
        color: var(----label--color);
        font-size: var(----label--font-size);

        &::before,
        &::after {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: var(----size);
            height: var(----size);
        }

        &::before {
            border-radius: 100%;
            content: "";
            user-select: none;
            transition-property: background-color, border-color;
            transition-duration: var(--transition-duration);
            transition-timing-function: var(--transition-easing);
            margin-right: var(----margin-right);
            border-color: var(----border-color);
            border-style: var(----border-style);
            border-width: var(----border-width);
            background-color: var(----background);
        }

        &::after {
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            text-align: center;
            background-color: var(----color);
            margin-top: calc(#{var(----size)} / -2);
            mask-size: var(----checkmark--size) var(----checkmark--size);
        }
    }

    &.-disabled {
        cursor: default;

        .radio-label {
            &::before,
            &::after {
                cursor: default;
            }
        }
    }

    &.-native {
        input {
            top: auto;
            left: auto;
            position: relative;
            opacity: 1;
            height: auto;
            width: auto;
            margin-right: var(----margin-right);
        }

        .radio-label {
            &::after,
            &::before {
                display: none;
            }
        }
    }
}