.wk-buttons-group{

    display: inline-block;
    transition: opacity .1s ease;

    &--disabled{
        opacity: .7;
        
        .wk-buttons-group__button{
            cursor: not-allowed !important;
        }
    }

    &__inner{
        background-color: $gray_100;
        padding: 5px 0;
        border-radius: 3px;

        position: relative;

        display: flex;
        align-items: center;
    }

    &__button{
        width: 65px;
        text-align: center;
        padding: 5px;
        border: none;
        outline: none;
        background-color: transparent;
        font-family: inherit;
        font-size: 1rem;
        font-weight: $font_normal;
        cursor: pointer;

        position: relative;

        color: $gray;

        transition: color .3s ease;

        border-right: 1px solid $gray_200;

        &:last-child{
            border-right: none;
        }

        &--active{
            color: white;
        }
    }

    &__overlay{
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px;
        transition: transform .3s ease;

        &--hidden{
            opacity: 0;
            transition: none;
        }
    }
    &__overlayc{
        border-radius: 3px;
        background-color: $secondary;
        width: 100%;
        height: 100%;
    }
}