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

.bolt-toggle-button-pill {
    background-color: transparent;
    border: 1px solid $secondary-text;
    align-items: center;
    border-radius: 12px;
    display: flex;
    justify-content: flex-start;
    padding: 3px;
    width: 40px;
    height: 20px;

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

.bolt-toggle-button-icon {
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: $secondary-text;
    height: 12px;
    width: 12px;
    transition: transform 0.1s;
}

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

.bolt-toggle-button.disabled .bolt-toggle-button-pill {
    border-color: $neutral-20;
    @media screen and (-ms-high-contrast: active) {
        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;
    @media screen and (-ms-high-contrast: active) {
        background-color: highlight;
    }
}

.bolt-toggle-button.checked .bolt-toggle-button-icon {
    background-color: $white;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

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

.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;
}

.bolt-focus-visible .checked .bolt-toggle-button-pill.bolt-focus-treatment:focus {
    border-color: $backgroundColor;
    @media screen and (-ms-high-contrast: active) {
        border-color: highlight;
    }
}