@import "../../styles/index";
.dnn-radio-buttons {
    float: left;
    width: 100%;
    &.right {
        ul {
            li {
                float: right;
            }
        }
    }
    >label {
        float: left;
        color: var(--dnn-color-foreground, @bulgarianRose);
    }
    .dnn-ui-common-tooltip {
        float: left;
        margin-left: 10px;
        svg {
            width: 20px;
            height: 20px;
        }
    }
    ul {
        list-style: none;
        display: inline;
        margin: 0;
        padding: 0;
        li {
            float: left;
            position: relative;
            vertical-align: top;
            margin-left: 15px;
            label {
                position: relative;
                float: right;
                font-weight: 600;
                font-size: 13px;
                padding: 0;
                z-index: 9;
                cursor: pointer;
                padding-left: 28px;
                word-wrap: break-word;
                height: auto;
                margin-bottom: 24px;
                color: var(--dnn-color-foreground, @thunder);
            }
            .check {
                display: block;
                box-shadow: inset 0 0 1px 1px @thunder;
                border-radius: 100%;
                box-sizing: border-box;
                height: 16px;
                width: 16px;
                z-index: 5;
                position: absolute;
                top: 2px;
                left: 0;
                padding: 2px;
                border: none !important;
                transition: .14s;
            }
            input[type=radio] {
                position: absolute;
                visibility: hidden;
            }
            input[type=radio]:checked ~ .check {
                background: var(--dnn-color-primary, @curiousBlue);
                border: none !important;
                box-shadow: inset 0 0 1px 1px var(--dnn-color-primary, @curiousBlue), inset 0 0 0 4px var(--dnn-color-primary-contrast, #fff);
            }
            &.disabled {
                label {
                    color: var(--dnn-color-neutral, @alto);
                    cursor: not-allowed;
                }
                &.checked {
                    input[type=radio]:checked ~ .check {
                        background: var(--dnn-color-neutral, @alto);
                        box-shadow: inset 0 0 1px 1px @alto, inset 0 0 0 3px @gallery;
                    }
                }
                .check {
                    box-shadow: inset 0 0 1px 1px var(--dnn-color-foreground-light, @mercury);
                    cursor: not-allowed;
                }
            }
        }
    }
}