$toggleButtonTextColor: #5a5a5a;
$toggleButtonBorderColor: #c6c6c6;

.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-bottom: 4px;
    @include transition(all 0.2s ease-out);
    &:hover {
        text-decoration: none;
        color: darken($toggleButtonTextColor, 30%);
        border-color: darken($toggleButtonBorderColor, 30%);
        @include box-shadow(0 1px 4px rgba(0,0,0,0.20));
    }
    &:active {
        @include box-shadow(inset 0 2px 0 rgba(0,0,0,0.20));
        border-color: darken($toggleButtonBorderColor, 30%);
    }
    .toggle-button__icon {
        color: $toggleButtonTextColor;
        line-height: 20px;
    }
}

.toggle-button--active {
    color: $white;
    background-color: darken($sd-blue, 11%);
    border-color: darken($sd-blue, 11%);
    border-top-color: darken($sd-blue, 30%);
    @include box-shadow(inset 0 2px 0 rgba(0,0,0,0.20));
    &:hover {
        color: $white;
        border-color: darken($sd-blue, 16%);
        background-color: darken($sd-blue, 16%);
        @include box-shadow(inset 0 2px 0 rgba(0,0,0,0.20));
    }
    &:active {
        @include box-shadow(inset 0 2px 0 rgba(0,0,0,0.20));
        border-color: darken($sd-blue, 11%);
        background-color: darken($sd-blue, 1%);
    }
    .toggle-button__icon {
        color: $white;
    }
}

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

.button-list {
    overflow: hidden;
    .toggle-button, .btn {
        float:left;
        margin-right: 6px;
        margin-bottom: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } 
}
.subnav {
    .toggle-list {
        .button-list {
            white-space: nowrap;
            max-height: 26px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .button-list {
        .toggle-button, .btn {
            margin-bottom: 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;
            top: 0; bottom: 0;
            right: 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; }
    }
}