.dijitRadio {
    border-radius: calc($radio-size / 2);
    background-color: $radio-normal-bgcolor;
    border: $radio-normal-border;
    height: $radio-size;
    width: $radio-size;
    cursor: pointer;

    .dijitCheckBoxInput {
        width: $check-size;
        height: $check-size;
        cursor: pointer;
    }

    &Checked {
        border: $radio-checked-border;
        position: relative;

        &:before {
            $size: $radio-size - 10;
            border-radius: calc($size / 2);
            background-color: $radio-checked-color;
            content: "";
            height: $size;
            left: 50%;
            margin-left: -(calc($size / 2));
            margin-top: -(calc($size / 2));
            position: absolute;
            top: 50%;
            width: $size;
        }
    }

    &Hover:not(.dijitRadioDisabled) {
        border-color: $color-palette-primary-400;
        cursor: pointer;
    }

    &Focused:not(.dijitRadioDisabled) {
        outline: $field-border-size solid $color-palette-primary-op-20;
    }

    &Disabled {
        background-color: $radio-disabled-bgcolor;
        border: $radio-disabled-border;
        position: relative;

        &:before {
            background-color: $radio-checked-disabled-color;
        }
    }
}
