@use "mixins" as *;
// общий стил для кнопки без заливки
// кнопки с обводкой
// кнопка для выпадающего меню

.btn-default{
    @include default_button-full;
    background: var(--DEFAULT);
    color:  var(--WHITE);
  
}
.btn-primary{ 
    @include default_button-full;
    background: var(--PRIMARY);
    color: var(--WHITE);
  
}
.btn-success{
    @include default_button-full;
    background: var(--SUCCESS);
    color: var(--WHITE);
}
.btn-info{
    @include default_button-full;
    background: var(--INFO);
    color: var(--WHITE);
}
.btn-warning{
    @include default_button-full;
    background: var(--WARNING);
    color: var(--WHITE);
}
.btn-danger{
    @include default_button-full;
    background: var(--DANGER);
    color: var(--WHITE);
}

.btn-success:active,
.btn-success:focus,
.btn-info:focus,
.btn-info:active,
.btn-warning:focus,
.btn-warning:active
.btn-danger:active,
.btn-danger:focus{
    outline: none;
    border: none;
}
.btn-default:disabled,
.btn-primary:disabled,
.btn-success:disabled,
.btn-info:disabled,
.btn-warning:disabled,
.btn-danger:disabled{
    cursor: auto;
    background: var(--GRAY);
    opacity: .5;
    color: var(--MIDLE-GRAY);
}
// общий стиль без background
.light-btn-default{
    @include default_button-light;
    border: 2px solid var(--ADD-COLOR-5);
    color:  var(--DEFAULT);
}
.light-btn-primary{
    @include default_button-light;
    border: 2px solid var(--PRIMARY);
    color: var(--PRIMARY);  
}
.light-btn-success{
    @include default_button-light;
    border: 2px solid var(--SUCCESS);
    color: var(--SUCCESS);
}
.light-btn-info{
    @include default_button-light;
    border: 2px solid var(--INFO);
    color: var(--INFO);
}
.light-btn-warning{
    @include default_button-light;
    border: 2px solid var(--WARNING);
    color: var(--WARNING);
}
.light-btn-danger{
    @include default_button-light;
    border: 2px solid var(--DANGER);
    color: var(--DANGER);
}

.light-btn-default:active,
.light-btn-default:focus,
.light-btn-primary:focus,
.light-btn-primary:active,
.light-btn-success:active,
.light-btn-success:focus,
.light-btn-info:focus,
.light-btn-info:active,
.light-btn-warning:focus,
.light-btn-warning:active
.light-btn-danger:active,
.light-btn-danger:focus{
    outline: none
}

.light-btn-default:disabled,
.light-btn-primary:disabled,
.light-btn-success:disabled,
.light-btn-info:disabled,
.light-btn-warning:disabled,
.light-btn-danger:disabled{
    cursor: auto;
    background: var(--WHITE);
    border: 2px solid var(--GRAY);;
    color: var(--GRAY);
    opacity: .5;
}
.sln-progress-bar{
    width: 90%;
    position: absolute;
    left: 6px;
    bottom: 0; 
}

.sln-btn-grid-menu {
    border: none;
    background: transparent;
    cursor: pointer;
}
.sln-cancel-btn{
    border: 2px solid var(--DANGER);
    border-radius: 10px;
}
.sln-save-btn{
    border: 2px solid var(--PRIMARY);
    border-radius: 10px;
}
.sln-add-button{
    border-radius: 10px;
}
.right-side-btn{
    border: 2px solid var(--GRAY);
    border-radius: 10px;
    img{
        padding: 1px;
    }
}
.right-side-btn-s {
    height: calc(45px - 45px / 3); // Уменьшение на 1/3
    width: calc(45px - 45px / 3);
    padding: calc(8px - 8px / 3) ;
    border-radius: 10px;
}
.right-side-btn-xs {
    height: calc(45px / 2); // Уменьшение в 2 раза
    width: calc(45px / 2);
    padding: calc(8px / 2);
    border-radius: 6px;
}
.right-side-btn-l {
    height: calc(45px + (45px / 3)); // увеличение на 1/3
    width: calc(45px + (45px / 3));
    padding: calc(10px + (10px / 3)) 
}
.right-side-btn-xl {
    height: calc(45px * 2); // увеличение в 2 раза
    width: calc(45px * 2);
    padding: calc(8px * 2);
}
// приминиимо для обычных кнопок
// default_button-full
.sln-btn-full-xs{
    min-width: calc(45px / 2); // Уменьшение в 2 раза
    min-height: calc(45px / 2);
    font-size: 9px;
    padding: 0 7.5px; 
}
.sln-btn-full-s{
    min-width: calc(45px - (45px / 3)); //Уменьшение на 1/3
    min-height: calc(45px - (45px / 3));
    font-size: 10px;
    padding: 0 10px;
}
.sln-btn-full-l{
    min-width: calc(45px + (45px / 3)); // Увеличение на 1/3
    min-height: calc(45px + (45px / 3));
    font-size: 16px;
    padding: 0 22.5px;
}
.sln-btn-full-xl{
    min-width: calc(45px * 2); // Увеличение в 2 раза
    min-height: calc(45px * 2);
    font-size: 22px;
    padding: 0 30px; 
}
// default_button-light
.sln-btn-light-xs{
    width: calc(45px / 2);
    height: calc(45px / 2);
    font-size: 9px;
    padding: 0 7.5px; 
}
.sln-btn-light-s{
    min-width: calc(45px - (45px / 3));
    min-height: calc(45px - (45px / 3));
    font-size: 10px;
    padding: 0 10px;
}
.sln-btn-light-l{
    min-width: calc(45px + (45px / 3));
    min-height: calc(45px + (45px / 3));
    font-size: 16px;
    padding: 0 22.5px;
}
.sln-btn-light-xl{
    min-width: calc(45px * 2);
    min-height: calc(45px * 2);
    font-size: 22px;
    padding: 0 30px; 
}