/*version 1.0.2*/
/*Toggle Styles*/

@import "../theme-light.scss";

.toggle-content {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    height: 100%;
    overflow-y: auto;
    margin: 32px 0px;
    padding: 2px 2px;
}

.toggle-content .toggle-header {
    width: 100%;
    -ms-user-select: none;
}

.toggle-content > div {
    height: 100%;
}

.toggle-content > div > div {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    outline: none;
}

html[dir=ltr] .toggle-content {
    padding-right: $paddingForScrollBars;
}

html[dir="rtl"] .toggle-content {
    padding-left: $paddingForScrollBars;
}

html[dir="rtl"] .toggle-content > div > div {
    padding-right: 4px;
}

.toggle-content > div > div .toggle-container {
    width: 100%;
    margin-bottom: 8px;
}

.win-toggleswitch .win-toggleswitch-clickregion {
    margin-top:4px;
    padding-top:4px;
}

.toggle-content > div > div .toggle-container > strong {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.75rem;
}

.win-toggleswitch .win-toggleswitch-value {
    margin-left: 4px;
}
html[dir="ltr"] .win-toggleswitch .win-toggleswitch-value {
    margin-right: 4px;
}

html[dir="ltr"] .toggle-content > div > div .toggle-container {
    padding-right: 10px;
}

html[dir="rtl"] .toggle-content > div > div .toggle-container {
    padding-left: 10px;
}

.toggle-content > div > div oobe-toggle {
    width: 100%;
}

html[focus-visible="false"] .toggle-content > div > div:focus {
    box-shadow: none;
}

.toggle-content > div > div:focus {
    outline: none;
    box-shadow: 0px 0px 0px 2px $outlineFocusColor;
    border-radius: 4px;
}

html[focus-visible="false"] .toggle-content > div > div oobe-toggle .win-toggleswitch:focus .win-toggleswitch-clickregion {
    box-shadow: none;
}

.toggle-content > div > div oobe-toggle .win-toggleswitch:focus .win-toggleswitch-clickregion, .win-toggleswitch:focus .win-toggleswitch-clickregion {
    outline: none;
    box-shadow: 0px 0px 0px 2px $outlineFocusColor;
    border-radius: 4px;
}

.toggle-content > div > div oobe-toggle .win-toggleswitch .win-toggleswitch-header {
    max-width: none;
    margin-bottom: 1px;
    margin-top: 4px;
    color: $altForegroundSecondaryRestColor;
    font-size: 0.87rem;
    padding-right: 16px;
    -ms-user-select: none;
}

.toggle-content > div > div oobe-toggle .win-toggleswitch .win-toggleswitch-header h4 {
    font-size: inherit;
    font-weight: 700;
    margin: 0;
    color: $altForegroundSecondaryRestColor;
    font-size: 0.87rem;
    padding-right: 16px;
    -ms-user-select: none;
}

.toggle-content > div > div oobe-toggle .win-toggleswitch .win-toggleswitch-clickregion {
    min-width: 100px;
}

.toggle-content > div > div common-toggle {
    width: 100%;
}

.toggle-content > div > div common-toggle .win-toggleswitch:focus .win-toggleswitch-clickregion {
    outline: none;
    box-shadow: 0px 0px 0px 2px $outlineFocusColor;
    border-radius: 4px;
}

html[focus-visible="false"] .toggle-content > div > div common-toggle .win-toggleswitch:focus .win-toggleswitch-clickregion {
    box-shadow:none;
    outline:none;
}

.toggle-content > div > div common-toggle .win-toggleswitch .win-toggleswitch-header {
    max-width: none;
}

.toggle-content > div > div common-toggle .win-toggleswitch .win-toggleswitch-header h4 {
    font-size: inherit;
    font-weight: 700;
    margin: 0;
}

.toggle-content > div > div common-toggle .win-toggleswitch.win-toggleswitch-off .win-toggleswitch-header {
    color: $altForegroundSecondaryRestColor;
}

.toggle-content > div > div common-toggle .win-toggleswitch.win-toggleswitch-off .win-toggleswitch-header h4 {
    color: $foregroundWhiteColor;
}

.toggle-content > div > div common-toggle .win-toggleswitch .win-toggleswitch-clickregion {
    min-width: 100px;
}


@media only screen and (max-width:444px) {
    .win-toggleswitch .win-toggleswitch-value {
        font-size: 0.87rem;
    }

    .toggle-content > div > div oobe-toggle .win-toggleswitch .win-toggleswitch-header {
        margin-top: 4px;
        font-size: 0.81rem;
    }

    .toggle-content > div > div .toggle-container > strong {
        font-size: 0.87rem;
        line-height: 1.25rem;
    }

    .toggle-content {
        margin: 24px 0;
    }

    .toggle-content > div > div .toggle-container {
        margin-bottom: 12px;
    }
}

@media (-ms-high-contrast)
{
    .toggle-content > div > div oobe-toggle .win-toggleswitch:focus .win-toggleswitch-clickregion {
        outline: 2px solid Highlight;
    }

    .toggle-content > div > div common-toggle .win-toggleswitch:focus .win-toggleswitch-clickregion {
        outline: 2px solid Highlight;
    }

    .toggle-content > div > div oobe-toggle .win-toggleswitch .win-toggleswitch-header, .toggle-content > div > div oobe-toggle .win-toggleswitch .win-toggleswitch-header h4 {
        color: ButtonText;
        opacity: 1;
    }

    .win-toggleswitch-on .win-toggleswitch-clickregion .win-toggleswitch-values .win-toggleswitch-value {
        color: ButtonText;
    }

    .win-toggleswitch-on .win-toggleswitch-clickregion .win-toggleswitch-track {
        background: Highlight;
        border-color: Highlight;
    }

    .win-toggleswitch-on .win-toggleswitch-clickregion .win-toggleswitch-track .win-toggleswitch-thumb {
        background: HighlightText;
    }

    .win-toggleswitch-on .win-toggleswitch-clickregion:hover .win-toggleswitch-track {
        background: HighlightText;
        border-color: Highlight;
    }

    .win-toggleswitch-on .win-toggleswitch-clickregion:hover .win-toggleswitch-track .win-toggleswitch-thumb {
        background: Highlight;
    }

    .win-toggleswitch-off .win-toggleswitch-clickregion .win-toggleswitch-values .win-toggleswitch-value {
        color: ButtonText;
    }

    .win-toggleswitch-off .win-toggleswitch-clickregion .win-toggleswitch-track {
        background: ButtonFace;
        border-color: GrayText;
    }

    .win-toggleswitch-off .win-toggleswitch-clickregion .win-toggleswitch-track .win-toggleswitch-thumb {
        background: ButtonText;
    }

    .win-toggleswitch-off .win-toggleswitch-clickregion:hover .win-toggleswitch-track {
        background: HighlightText;
        border-color: Highlight;
    }

    .win-toggleswitch-off .win-toggleswitch-clickregion:hover .win-toggleswitch-track .win-toggleswitch-thumb {
        background: Highlight;
    }

    .toggle-content > div > div:focus {
        outline-color: Highlight;
        outline-width: 2px;
        outline-style: solid;
    }
}