﻿.root-Check .ms-Check {
    line-height: 1;
    width: 18px;
    height: 18px;
    vertical-align: top;
    position: relative;
    user-select: none;
}

    .root-Check ::deep .ms-Check::before {
        content: '';
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;
        border-radius: 50%;
        opacity: 1;
        background: var(--semanticColors-BodyBackground);
    }

    .ms-Check-checkHost:hover .ms-Check, .ms-Check-checkHost:focus .ms-Check, .ms-Check:focus {
        opacity: 1;
    }

    .root-Check ::deep .ms-Check.is-checked::before {
        content: '';
        opacity: 1;
        background: var(--palette-ThemePrimary);
    }

@media screen and (-ms-high-contrast: active) {
    .ms-Check.is-checked:before {
        background: Window;
    }
}

/*Circle*/
::deep .ms-Check-circle {
    color: var(--palette-NeutralSecondary);
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
}

.ms-Check.is-checked ::deep .ms-Check-circle {
    color: var(--palette-White);
}
@media screen and (-ms-high-contrast: active) {
    ::deep .ms-Check-circle.is-checked:before {
        color: WindowText;
    }
}

/*Check*/
::deep .ms-Check-check {
    font-size: 18px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    opacity: 0;
    color: var(--palette-NeutralSecondary);
    font-size: var(--iconFontSize-Medium); /*  //This is technically IconFontSize.Medium which is equivalent to FontSize.MediumPlus (16px)*/
    left: 0.5px; /*//isRTL ignored*/
}

    .ms-Check-check:hover {
        opacity: 1;
    }

@media screen and (-ms-high-contrast: active) {
    .ms-Check-check {
        -ms-high-contrast-adjust: none;
    }
}

.ms-Check.is-checked ::deep .ms-Check-check {
    opacity: 1;
    color: var(--palette-White);
    font-weight: 900;
}
@media screen and (-ms-high-contrast: active) {
    .ms-Check.is-checked .ms-Check-check {
        border: none;
        color: WindowText;
    }
}