/* Styles specific to the CheckBox widget across all visual families. */

.mwWidget.mwCheckBox .mwCheckBoxRadioIconNode,
.mwWidget.mwCheckBox .mwTextNode,
.mwWidget.mwRadioButton .mwCheckBoxRadioIconNode,
.mwWidget.mwRadioButton .mwTextNode {
    display: inline-block;
}

.mwWidget.mwCheckBox .mwCheckBoxRadioIconNode,
.mwWidget.mwRadioButton .mwCheckBoxRadioIconNode {
    vertical-align: middle;
    position: relative;
}

.mwWidget.mwRadioButton .mwCheckBoxRadioIconNode,
.mwWidget.mwRadioButton .mwCheckBoxRadioIconNode .mwCheckBoxRadioIconInner {
    border-radius: 50% 50%;
}

.mwWidget.mwCheckBox .mwCheckBoxRadioIconNode .mwCheckBoxRadioIconInner,
.mwWidget.mwRadioButton .mwCheckBoxRadioIconNode .mwCheckBoxRadioIconInner {
    display: none;
    position: absolute;
}

.mwWidget.mwCheckBox .mwCheckBoxRadioIconNode .mwCheckBoxRadioIconInner {
    transform: rotate(-45deg);
}

.mwWidget.mwCheckBoxChecked .mwCheckBoxRadioIconNode .mwCheckBoxRadioIconInner,
.mwWidget.mwRadioButtonChecked .mwCheckBoxRadioIconNode .mwCheckBoxRadioIconInner {
    display: block;
}

.mwWidget.mwCheckBox.mwTextMixin .mwTextNode,
.mwWidget.mwRadioButton.mwTextMixin .mwTextNode {
    margin-left: 3px; /* 3px gap between the checkBoxRadioIconNode and textNode */
    vertical-align: middle;

    /* Ellipsis feature; In addition to the below, the textNode is also sized explicitly, in the widget JS class */
    overflow: hidden;
    text-overflow: ellipsis;
}

.mwWidget.mwCheckBox.mwTextMixin.mwNoText .mwTextNode,
.mwWidget.mwRadioButton.mwTextMixin.mwNoText .mwTextNode {
    margin: 0; /* There is no need to separate textNode and checkBoxRadioIconNode since there is no text in this case */
}

.mwWidget.mwCheckBox,
.mwWidget.mwRadioButton {
  cursor: default; /* To ensure that the cursor doesn't change to text for the text portions */
}