@import '../../_widgetsCommon.scss';
.bolt-toggle-button {
    align-items: center;
    color: $primary-text;
    display: inline-flex;
    white-space: nowrap;
}

.bolt-toggle-button-pill {
    align-items: center;
    background-color: transparent;
    border: 1px solid $secondary-text;
    border-radius: 0.75rem;
    display: flex;
    justify-content: flex-start;
    padding: 0.2rem;
    width: 2.5rem;

    &:focus {
        outline: none;
        @include ms-high-contrast-highlight();
    }
}

.bolt-toggle-button-icon {
    background-color: $secondary-text;
    border: 1px solid transparent;
    border-radius: 50%;
    height: 0.75rem;
    left: 0%;
    position: relative;
    transition: left 0.1s;
    width: 0.75rem;

    @include ms-high-contrast-override {
        forced-color-adjust: none;
        border-color: windowtext;
    }
}

.bolt-toggle-button.disabled {
    cursor: default;
}

.bolt-toggle-button.disabled .bolt-toggle-button-pill {
    border-color: $neutral-20;
    @include ms-high-contrast-override {
        forced-color-adjust: none;
        border-color: graytext;
    }
}

.bolt-toggle-button.disabled .bolt-toggle-button-icon {
    background-color: $neutral-20;
}

.bolt-toggle-button.checked .bolt-toggle-button-pill {
    background-color: $communication-background;
    border-color: transparent;
    @include ms-high-contrast-override {
        forced-color-adjust: none;
        background-color: highlight;
    }
    @include theme-high-contrast {
        background-color: $communication-foreground;
    }
}

.bolt-toggle-button.checked .bolt-toggle-button-icon {
    background-color: $white;
    left: 63%;

    @include theme-high-contrast {
        background-color: $communication-background;
    }
}

.bolt-toggle-button.checked.disabled .bolt-toggle-button-pill {
    background-color: $neutral-20;

    @include ms-high-contrast-override {
        forced-color-adjust: none;
        background: graytext;
        border-color: graytext;
    }
}

.bolt-toggle-button-text {
    padding-left: 8px;
}

.bolt-focus-visible .bolt-toggle-button-pill.bolt-focus-treatment:focus {
    @include box-shadow-focus-rect();
    border-color: $communication-background;
    border-radius: 12px;
    @include ms-high-contrast-override {
        forced-color-adjust: none;
        border-color: highlight;
    }
}

.bolt-focus-visible .checked .bolt-toggle-button-pill.bolt-focus-treatment:focus {
    @include box-shadow-focus-rect(false, true);
    border-color: $backgroundColor;
    @include ms-high-contrast-override {
        forced-color-adjust: none;
        border-color: highlight;
    }
}