superdesk/superdesk-client-core

$toggleButtonTextColor: $sd-text-light;
$toggleButtonBorderColor: var(--sd-colour-line--medium);
$toggleButtonBorderColorHover: var(--sd-colour-line--strong);

// .toggle-button {
//     display: inline-block;
//     text-decoration: none;
//     border-radius: 2px;
//     box-sizing: border-box;
//     padding: 2px 10px;
//     text-decoration: none;
//     font-size: 12px;
//     background: transparent;
//     color: $toggleButtonTextColor;
//     border: 1px solid $toggleButtonBorderColor;
//     height: 26px;
//     line-height: 20px;
//     margin-block-end: 4px;
//     @include transition(all 0.2s ease-out);
//     &:hover {
//         text-decoration: none;
//         color: $sd-text;
//         border-color: $toggleButtonBorderColorHover;
//         box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.2);
//     }
//     &:active {
//         box-shadow: inset 0 2px 0 hsla(0, 0%, 0%, 0.2);
//         border-color: $toggleButtonBorderColorHover;
//     }
//     .toggle-button__icon {
//         color: $toggleButtonTextColor;
//         line-height: 20px;
//     }
// }

// .toggle-button--active {
//     color: $white;
//     background-color: var(--sd-colour-interactive--active);
//     border-color: var(--sd-colour-interactive--active);
//     border-top-color: var(--sd-colour-interactive-btn-border);
//     box-shadow: inset 0 2px 0 hsla(0, 0%, 0%, 0.2);
//     &:hover {
//         color: $white;
//         background-color: var(--sd-colour-interactive);
//         box-shadow: inset 0 2px 0 hsla(0, 0%, 0%, 0.2);
//     }
//     &:active {
//         box-shadow: inset 0 2px 0 hsla(0, 0%, 0%, 0.2);
//         //border-color: darken($sd-blue, 11%);
//         background-color: var(--sd-colour-interactive--hover);
//     }
//     .toggle-button__icon {
//         color: $white;
//     }
// }

.toggle-button__text {
    line-height: 22px;
}

.button-list {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    .toggle-button, .btn {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } 
}
.subnav {
    .toggle-list {
        .button-list {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .button-list {
        .toggle-button, .btn {
            margin-block-end: 0;
       } 
    }
}

.button-list--padded {
   padding: 11px 0 11px 20px;
}

// Radio styled buttons
// --------------------------------------------------

$checkBtnColor: #546E7A;
$checkBtnColorActive: #78909C;

.btn__check {
    position: relative;
    color: #fff;
    padding: 10px 15px;
    background: $checkBtnColor;
    border: none;
    font-size: 13px;
    @include border-radius(3px);
    &:hover {
        cursor: pointer;
        background: lighten($checkBtnColor, 5%);
    }
    &.focus, &:focus {
        outline: 1px solid $sd-blue;
    }
    &.active, &:active {
        background: $checkBtnColorActive;
        @include box-shadow (inset 0 3px 0 0 rgba(0,0,0,0.2));
        &:after {
            content: "";
            width: 42px;
            position: absolute;
            background: url(~images/checkmark-big-full.png) no-repeat;
            background-size: 42px;
            background-position: 0 -2px;
            inset-block-start: 0; inset-block-end: 0;
            inset-inline-end: 8px;
            @include opacity(16);
        }
    }
    &.active {
      cursor: default;
    }
    &:active {
        background: darken($checkBtnColorActive, 5%);
        @include box-shadow (inset 0 3px 0 0 rgba(0,0,0,0.2));
        &:after {
          @include opacity(10);
        }
    }

    &.active:disabled {
        opacity: 0.4;
    }
    &:disabled {
        opacity: 0.4;
        color:rgba(255,255,255,0.7);
        &:not(.active) { background: $checkBtnColor !important; }
        &:hover { cursor: default; }
    }
}