$buttonSwitch-background-color: $base-color-light;
$buttonSwitch-color: $base-color-dark;
$buttonSwitch-shadow-color: rgba(0, 0, 0, 0.4);

$buttonSwitch-active-background-color: $base-color-active-background;
$buttonSwitch-active-color: $base-color-active;
button-switch {
    margin-right: 5px;
    display: inline-block;

    .buttonSwitch {
        min-height: 28px;
        min-width: 30px;
        width: auto;
        vertical-align: middle;

        position: relative;
        display: inline-flex!important;
        justify-content: center;
        align-items: center;
        overflow: visible;
        left: 0px;

        font-size: 1em;
        text-align: left;

        &.only-icon {
            text-align: center;
        }
        &.only-text {
            padding-right: 10px;
            text-align: center;
        }

        background: $buttonSwitch-background-color;
        color: $buttonSwitch-color;

        box-shadow: 0px 2px 4px $buttonSwitch-shadow-color;
        border-radius: 2px;

        &:hover{
            box-shadow: 1px 2px 3px $buttonSwitch-shadow-color inset;
            text-shadow: none !important;
            cursor: pointer;
        }

        &-active{
            background: $buttonSwitch-active-background-color;
            color: $buttonSwitch-active-color;
        }
        &-disabled{
            opacity: .5;
            cursor: default !important;
            &:hover{
                box-shadow: none !important;
                text-shadow: none !important;
            }
        }

        &-label {
           margin: 0px;
           margin-left: 4px;
        }

        &-icon {
            position: relative;
            right: 0px;
            font-size: 1.4em;

            &.fa {
                font-size: 1.1em !important;
                top: 0px;
                &.fa-angle-double-down {
                    top: -4px;
                }
            }
        }
        &.iconLeft {
            .buttonSwitch-icon {
                top: 8px;
            }

            .buttonSwitch-label {
                margin-left: 0;
                margin-right: 4px;
            }
        }
    }
    .buttonSwitch-disabled, &[data-disabled="true"] .buttonSwitch{
        opacity: .5;
        cursor: not-allowed !important;
        &:hover {
            box-shadow: none !important;
            text-shadow: none !important;
        }
    }
    &.sliders {
        margin-right: 0;
        .buttonSwitch {
            font-size: 0.5em;
        }
    }
    &.navBar-opener, &.navBar-closer {
        .buttonSwitch {
            position: absolute;
            right: 2px;
            left: auto;
            bottom: $base-slider-height;
            background: rgba($buttonSwitch-background-color,.4);
            &:hover {
                background: rgba($buttonSwitch-background-color,1);
            }
            z-index: 999999;
            font-size: 0.8em;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        &.inverted-color {
            .buttonSwitch {
                background: rgba($buttonSwitch-color,.4);
                &:hover {
                    background: rgba($buttonSwitch-color,1);
                }
            }
        }
    }
    &.navBar-closer {
        .buttonSwitch {
            bottom: 1px;
        }
    }
    &.inverted-color {
        .buttonSwitch {
            color: $buttonSwitch-background-color;
            background: $buttonSwitch-color;
        }
    }

    &.no-background {
        .buttonSwitch {
            background: none;
            box-shadow: none;
            border-radius: 0;
            width: 0px;
            // color: $buttonSwitch-background-color;
            &-label{
                font-variant: small-caps;
                font-size: 80%;
                top: 0;
                // color: $base-color-light;
            }
            &-icon{
                // color: $base-color-light;
                font-size: 1.3em;
            }
            &-active, &:hover{
                .icon {
                    // color:$base-color-active;
                    cursor: pointer;
                }
            }
        }
    }

    &[data-type='removeWit'], &[data-type*='remove'], &[data-type*='close']{
        position: absolute;
        right: 6px;

        .buttonSwitch {
            border-radius: 100px;
            height: 22px;
            min-height: 22px;
            min-width: 22px;
            width: 22px;
            font-size: 0.7em;

            &-icon {
                right: 0px;
                font-weight: bold;
            }
        }
    }

    //Temp
    &.smaller{
        .buttonSwitch{
            font-size: 90%;
            top: -2px;
        }
    }
}

// Temporary
.togglePinned_btn {
    position: absolute;
    top: 54px;
    z-index: 20;
    left: 75%;
    transform: none !important;
    &.centered {
        left: 75%;
    }
    &.half-centered {
        left: 62.5%;
    }
    &.half-left {
        left: 50%;
    }
    &.left {
        left: 37.5%;
    }
    .buttonSwitch {
        transform: translate(-50%, 0px);
        border-radius: 100px;
        height: 40px;
        width: 40px;
        text-align: center;
        opacity: 1;
        font-weight: bold;
        color: rgb(41, 29, 29);
        background: $buttonSwitch-active-background-color;

        &.buttonSwitch-disabled{
            display: none;
        }
    }
    .buttonSwitch-label {
        display: none;
    }
   .buttonSwitch-icon {
      margin-left: 8px;
      margin: 8px 0;
      font-size: 1.4em;
   }
}
