@include exports( "radio/layout" ) {

    // Container box
    .k-radio {
        @include border-radius( $radio-radius );
        margin: 0;
        padding: 0;
        width: $radio-size;
        height: $radio-size;
        border-width: $radio-border-width;
        border-style: solid;
        outline: 0;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        -webkit-appearance: none;
    }

    .k-radio::before {
        content: "";
        width: $radio-size / 2;
        height: $radio-size / 2;
        border-radius: 50%;
        background-color: currentColor;
        transform: scale(0) translate(-50%, -50%);
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
    }

    // Hover state
    .k-radio:hover {
        cursor: pointer;
    }

    // Checked state
    .k-radio:checked::before {
        @include border-radius( $radio-radius );
        transform: scale(1) translate(-50%, -50%);
    }

    // Disabled state
    .k-radio:disabled,
    .k-radio:disabled + .k-radio-label {
        @include disabled( $disabled-styling );
    }

    // Radio label
    .k-radio-label {
        margin: 0;
        padding: 0;
        line-height: $radio-line-height;
        display: inline-flex;
        align-items: flex-start;
        vertical-align: middle;
        position: relative;
        cursor: pointer;

        .k-label {
            cursor: pointer;
        }

        // Hide empty label
        &:empty {
            display: none;
        }

        .k-ripple {
            top: $radio-size / 2;
            left: $radio-size / 2;
            right: auto;
            bottom: auto;
            width: $radio-size * 5 / 2;
            height: $radio-size * 5 / 2;
            transform: translate(-50%, -50%);
            border-radius: 50%;

            // Hide ripple temporarily
            visibility: hidden !important; // sass-lint:disable-line no-important
        }

        .k-ripple-blob {
            // sass-lint:disable-block no-important
            // use !important until ripple can apply these styles from the script
            top: 50% !important;
            left: 50% !important;
            width: 200% !important;
            height: 200% !important;
        }
    }

    .k-radio + .k-radio-label,
    .k-radio-label + .k-radio {
        margin-left: $radio-label-margin-x;
    }
    .k-radio-label > .k-radio {
        margin-right: $radio-label-margin-x;
    }
    kendo-label.k-radio-label > .k-radio:last-child {
        margin-right: 0;
    }
    kendo-label.k-radio-label > .k-label:first-child {
        margin-right: $radio-label-margin-x;
    }

    .k-radio-list {
        margin: $radio-list-margin;
        padding: $radio-list-padding;
        list-style: none;

        .k-radio-item {
            margin-top: $radio-list-item-margin-top;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    .k-list-horizontal {
        .k-radio-item {
            display: inline-block;
            margin: 0 $radio-list-horizontal-item-margin-x 0 0;

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

    // RTL
    .k-rtl,
    [dir="rtl"] {
        .k-radio + .k-radio-label,
        .k-radio-label + .k-radio {
            margin-left: 0;
            margin-right: $radio-label-margin-x;
        }
        .k-radio-label > .k-radio {
            margin-right: 0;
            margin-left: $radio-label-margin-x;
        }
        kendo-label.k-radio-label > .k-radio:last-child {
            margin-left: 0;
        }
        kendo-label.k-radio-label > .k-label:first-child {
            margin-right: 0;
            margin-left: $radio-label-margin-x;
        }

        .k-list-horizontal {
            .k-radio-item {
                margin-right: 0;
                margin-left: $radio-list-horizontal-item-margin-x;

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




@include exports( "radio/layout/edge" ) {

    .k-radio::-ms-check {
        border-width: 0;
        border-color: inherit;
        color: inherit;
        background-color: inherit;
    }

    // IE 11 hack
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .k-radio::-ms-check {
            border-width: 1px;
        }
    }

}