/* Кнопки */

/*
    Кнопка:
    <a href="#" class="button button__middle button__filled button__gray">
        <span class="button__svgicon">{% include 'includes/buttons/logout.twig'  %}</span>
        Я текст кнопки
    </a>

    Кнопка-иконка:
    <a href="#" class="button-icon button__middle button__filled button__gray">
        <span class="button__svgicon">{% include 'includes/buttons/logout.twig'  %}</span>
    </a>
*/

:root {
    --button-font-family: 'Lato';
    /*Маленькие кнопки*/
    --small-padding: 4px;
    --small-font-size: 13px;
    --small-font-weight: 400;
    --small-line-height: 18px;
    --small-min-width: 18px;
    --small-min-height: 18px;
    --small-border-radius: 4px;
    --small-gap: 3px;
    --small-icon-width: 18px;
    /*Средние кнопки*/
    --middle-padding: 6px;
    --middle-font-size: 16px;
    --middle-font-weight: 400;
    --middle-line-height: 21px;
    --middle-min-width: 24px;
    --middle-min-height: 24px;
    --middle-border-radius: 8px;
    --middle-gap: 6px;
    --middle-icon-width: 24px;
    /*Большие кнопки*/
    --big-padding: 15px;
    --big-font-size: 21px;
    --big-font-weight: 900;
    --big-line-height: 26px;
    --big-min-width: 26px;
    --big-min-height: 26px;
    --big-border-radius: 12px;
    --big-gap: 10px;
    --big-icon-width: 30px;
    /*Толщина обводки (только для "button__bordered")*/
    --border-width: 2px;
    /*Зеленая кнопка*/
    --green-color: #2fb91b;
    --green-color-hover: #2ba118;
    --green-color-text: #ffffff;
    --green-background: linear-gradient(180deg, #3dcb0d, #139336);
    /*Красная кнопка*/
    --red-color: #ed4325;
    --red-color-hover: #e63415;
    --red-color-text: #ffffff;
    --red-background: transparent;
    /*Серая кнопка*/
    --gray-color: #333333;
    --gray-color-hover: #222121;
    --gray-color-text: #ffffff;
    --gray-background: transparent;
    /*Синяя кнопка*/
    --blue-color: #50738e;
    --blue-color-hover: #3b5a72;
    --blue-color-text: #ffffff;
    --blue-background: transparent;
    /*Белая кнопка*/
    --white-color: #ffffff;
    --white-color-hover: #ffffff;
    --white-color-text: #567790;
    --white-background: transparent;
}

.button,
.button-icon{
    font-family: var(--button-font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer
}
.button .button__svgicon,
.button-icon .button__svgicon{
    display: block;
}
.button svg,
.button-icon svg{
    display: block;
    width: 100%;
    height: auto;
}

/*Размеры кнопок*/
.button.button__small,
.button-icon.button__small{
    font-size: var(--small-font-size);
    font-weight: var(--small-font-weight);
    line-height: var(--small-line-height);
    min-width: var(--small-min-width);
    min-height: var(--small-min-height);
    border-radius: var(--small-border-radius);
    gap: var(--small-gap);
}
.button.button__small{
    --padding: var(--small-padding) calc( var(--small-padding) * 2 );
}
.button-icon.button__small{
    --padding: var(--small-padding);
}
.button.button__small .button__svgicon,
.button-icon.button__small .button__svgicon{
    width: var(--small-icon-width);
}

.button.button__middle,
.button-icon.button__middle{
    font-size: var(--middle-font-size);
    font-weight: var(--middle-font-weight);
    line-height: var(--middle-line-height);
    min-width: var(--middle-min-width);
    min-height: var(--middle-min-height);
    border-radius: var(--middle-border-radius);
    gap: var(--middle-gap);
}
.button.button__middle{
    --padding: var(--middle-padding) calc( var(--middle-padding) * 2 );
}
.button-icon.button__middle{
    --padding: var(--middle-padding);
}
.button.button__middle .button__svgicon,
.button-icon.button__middle .button__svgicon{
    width: var(--middle-icon-width);
}

.button.button__big,
.button-icon.button__big{
    --padding: var(--big-padding) calc( var(--big-padding) * 2 );
    font-size: var(--big-font-size);
    font-weight: var(--big-font-weight);
    line-height: var(--big-line-height);
    min-width: var(--big-min-width);
    min-height: var(--big-min-height);
    border-radius: var(--big-border-radius);
    gap: var(--big-gap);
}
.button.button__big{
    --padding: var(--big-padding) calc( var(--big-padding) * 2 );
}
.button-icon.button__big{
    --padding: var(--big-padding);
}
.button.button__big .button__svgicon,
.button-icon.button__big .button__svgicon{
    width: var(--big-icon-width);
}

/*Тип кнопки*/
.button.button__text,
.button-icon.button__text{
    padding: var(--padding);
    border-width: 0px;
    border-style: unset;
}
.button.button__filled,
.button-icon.button__filled{
    padding: var(--padding);
    border-width: 0px;
    border-style: unset;
}
.button.button__bordered,
.button-icon.button__bordered{
    padding: calc(var(--padding) - var(--border-width));
    border-width: var(--border-width);
    border-style: solid;
}

/*Зеленая кнопка*/
.button.button__green.button__text,
.button-icon.button__green.button__text{
    color: var(--green-color);
}
.button.button__green.button__text svg,
.button-icon.button__green.button__text svg{
    fill: var(--green-color);
}
.button.button__green.button__text:hover,
.button-icon.button__green.button__text:hover{
    color: var(--green-color-hover);
}
.button.button__green.button__text:hover svg,
.button-icon.button__green.button__text:hover svg{
    fill: var(--green-color-hover);
}

.button.button__green.button__filled,
.button-icon.button__green.button__filled{
    color: var(--green-color-text);
    background: var(--green-background);
    background-color: var(--green-color);
}
.button.button__green.button__filled svg,
.button-icon.button__green.button__filled svg{
    fill: var(--green-color-text);
}
.button.button__green.button__filled:hover,
.button-icon.button__green.button__filled:hover{
    background-color: var(--green-color-hover);
}
.button.button__green.button__filled:hover svg,
.button-icon.button__green.button__filled:hover svg{
    fill: var(--green-color-text);
}

.button.button__green.button__bordered,
.button-icon.button__green.button__bordered{
    color: var(--green-color);
    border-color: var(--green-color);
}
.button.button__green.button__bordered svg,
.button-icon.button__green.button__bordered svg{
    fill: var(--green-color);
}
.button.button__green.button__bordered:hover,
.button-icon.button__green.button__bordered:hover{
    color: var(--green-color-hover);
    border-color: var(--green-color-hover);
}
.button.button__green.button__bordered:hover svg,
.button-icon.button__green.button__bordered:hover svg{
    fill: var(--green-color-hover);
}

/*Красная кнопка*/
.button.button__red.button__text,
.button-icon.button__red.button__text{
    color: var(--red-color);
}
.button.button__red.button__text svg,
.button-icon.button__red.button__text svg{
    fill: var(--red-color);
}
.button.button__red.button__text:hover,
.button-icon.button__red.button__text:hover{
    color: var(--red-color-hover);
}
.button.button__red.button__text:hover svg,
.button-icon.button__red.button__text:hover svg{
    fill: var(--red-color-hover);
}

.button.button__red.button__filled,
.button-icon.button__red.button__filled{
    color: var(--red-color-text);
    background: var(--red-background);
    background-color: var(--red-color);
}
.button.button__red.button__filled svg,
.button-icon.button__red.button__filled svg{
    fill: var(--red-color-text);
}
.button.button__red.button__filled:hover,
.button-icon.button__red.button__filled:hover{
    background-color: var(--red-color-hover);
}
.button.button__red.button__filled:hover svg,
.button-icon.button__red.button__filled:hover svg{
    fill: var(--red-color-text);
}

.button.button__red.button__bordered,
.button-icon.button__red.button__bordered{
    color: var(--red-color);
    border-color: var(--red-color);
}
.button.button__red.button__bordered svg,
.button-icon.button__red.button__bordered svg{
    fill: var(--red-color);
}
.button.button__red.button__bordered:hover,
.button-icon.button__red.button__bordered:hover{
    color: var(--red-color-hover);
    border-color: var(--red-color-hover);
}
.button.button__red.button__bordered:hover svg,
.button-icon.button__red.button__bordered:hover svg{
    fill: var(--red-color-hover);
}

/*Серая кнопка*/
.button.button__gray.button__text,
.button-icon.button__gray.button__text{
    color: var(--gray-color);
}
.button.button__gray.button__text svg,
.button-icon.button__gray.button__text svg{
    fill: var(--gray-color);
}
.button.button__gray.button__text:hover,
.button-icon.button__gray.button__text:hover{
    color: var(--gray-color-hover);
}
.button.button__gray.button__text:hover svg,
.button-icon.button__gray.button__text:hover svg{
    fill: var(--gray-color-hover);
}

.button.button__gray.button__filled,
.button-icon.button__gray.button__filled{
    color: var(--gray-color-text);
    background: var(--gray-background);
    background-color: var(--gray-color);
}
.button.button__gray.button__filled svg,
.button-icon.button__gray.button__filled svg{
    fill: var(--gray-color-text);
}
.button.button__gray.button__filled:hover,
.button-icon.button__gray.button__filled:hover{
    background-color: var(--gray-color-hover);
}
.button.button__gray.button__filled:hover svg,
.button-icon.button__gray.button__filled:hover svg{
    fill: var(--gray-color-text);
}

.button.button__gray.button__bordered,
.button-icon.button__gray.button__bordered{
    color: var(--gray-color);
    border-color: var(--gray-color);
}
.button.button__gray.button__bordered svg,
.button-icon.button__gray.button__bordered svg{
    fill: var(--gray-color);
}
.button.button__gray.button__bordered:hover,
.button-icon.button__gray.button__bordered:hover{
    color: var(--gray-color-hover);
    border-color: var(--gray-color-hover);
}
.button.button__gray.button__bordered:hover svg,
.button-icon.button__gray.button__bordered:hover svg{
    fill: var(--gray-color-hover);
}

/*Синия кнопка*/
.button.button__blue.button__text,
.button-icon.button__blue.button__text{
    color: var(--blue-color);
}
.button.button__blue.button__text svg,
.button-icon.button__blue.button__text svg{
    fill: var(--blue-color);
}
.button.button__blue.button__text:hover,
.button-icon.button__blue.button__text:hover{
    color: var(--blue-color-hover);
}
.button.button__blue.button__text:hover svg,
.button-icon.button__blue.button__text:hover svg{
    fill: var(--blue-color-hover);
}

.button.button__blue.button__filled,
.button-icon.button__blue.button__filled{
    color: var(--blue-color-text);
    background: var(--blue-background);
    background-color: var(--blue-color);
}
.button.button__blue.button__filled svg,
.button-icon.button__blue.button__filled svg{
    fill: var(--blue-color-text);
}
.button.button__blue.button__filled:hover,
.button-icon.button__blue.button__filled:hover{
    background-color: var(--blue-color-hover);
}
.button.button__blue.button__filled:hover svg,
.button-icon.button__blue.button__filled:hover svg{
    fill: var(--blue-color-text);
}

.button.button__blue.button__bordered,
.button-icon.button__blue.button__bordered{
    color: var(--blue-color);
    border-color: var(--blue-color);
}
.button.button__blue.button__bordered svg,
.button-icon.button__blue.button__bordered svg{
    fill: var(--blue-color);
}
.button.button__blue.button__bordered:hover,
.button-icon.button__blue.button__bordered:hover{
    color: var(--blue-color-hover);
    border-color: var(--blue-color-hover);
}
.button.button__blue.button__bordered:hover svg,
.button-icon.button__blue.button__bordered:hover svg{
    fill: var(--blue-color-hover);
}

/*Белая кнопка*/
.button.button__white.button__text,
.button-icon.button__white.button__text{
    color: var(--white-color);
}
.button.button__white.button__text svg,
.button-icon.button__white.button__text svg{
    fill: var(--white-color);
}
.button.button__white.button__text:hover,
.button-icon.button__white.button__text:hover{
    color: var(--white-color-hover);
}
.button.button__white.button__text:hover svg,
.button-icon.button__white.button__text:hover svg{
    fill: var(--white-color-hover);
}

.button.button__white.button__filled,
.button-icon.button__white.button__filled{
    color: var(--white-color-text);
    background: var(--white-background);
    background-color: var(--white-color);
}
.button.button__white.button__filled svg,
.button-icon.button__white.button__filled svg{
    fill: var(--white-color-text);
}
.button.button__white.button__filled:hover,
.button-icon.button__white.button__filled:hover{
    background-color: var(--white-color-hover);
}
.button.button__white.button__filled:hover svg,
.button-icon.button__white.button__filled:hover svg{
    fill: var(--white-color-text);
}

.button.button__white.button__bordered,
.button-icon.button__white.button__bordered{
    color: var(--white-color);
    border-color: var(--white-color);
}
.button.button__white.button__bordered svg,
.button-icon.button__white.button__bordered svg{
    fill: var(--white-color);
}
.button.button__white.button__bordered:hover,
.button-icon.button__white.button__bordered:hover{
    color: var(--white-color-hover);
    border-color: var(--white-color-hover);
}
.button.button__white.button__bordered:hover svg,
.button-icon.button__white.button__bordered:hover svg{
    fill: var(--white-color-hover);
}