:root {
    --se-btn-color-blue: var(--se-accent-blue);
    --se-btn-color-blue-hover: #3f7dfe;
    --se-btn-color-blue-active: #054de0;
    --se-btn-color-green: var(--se-accent-green);
    --se-btn-color-green-hover: #89d2a0;
    --se-btn-color-green-active: #4dbc70;
    --se-btn-color-error: #fe3f3f;
    --se-btn-color-error-hover: #ff7b84;
    --se-btn-color-disabled: #f0f0f0;
}

.se-btn {
    /* Buttons Design UI-KIT */
    --se-btn-color-main: #fff;
    --se-btn-bg-color-main: var(--main-colors-blue);
    --se-btn-bg-color-main-hover: var(--main-colors-blue-dark);
    --se-btn-bg-color-main-active: #030094;
    --se-btn-color-main-dark: #101423;
    --se-btn-bg-color-main-dark: #82ff82;
    --se-btn-bg-color-main-dark-hover: #65e465;
    --se-btn-bg-color-main-dark-active: #58d158;
    --se-btn-color-scnd: #fff;
    --se-btn-bg-color-scnd: #101423;
    --se-btn-bg-color-scnd-hover: #252e3d;
    --se-btn-bg-color-scnd-active: #040509;
    --se-btn-color-tert: #101423;
    --se-btn-color-tert-hover: #123af8;
    --se-btn-color-tert-active: #0400c7;
    --se-btn-bg-color-tert: transparent;
    --se-btn-bg-color-tert-hover: #fff;
    --se-btn-bg-color-tert-active: #fff;
    --se-btn-color-tert-dark: #fff;
    --se-btn-bg-color-tert-dark: #00000000;
    --se-btn-bg-color-tert-dark-hover: #ffffff29;
    --se-btn-bg-color-tert-dark-active: #ffffff4d;
    --se-btn-color-disabled: #717e95;
    --se-btn-bg-color-disabled: #ecf1f9;
    --se-btn-color-dark-disabled: #ffffff99;
    --se-btn-bg-color-dark-disabled: #ffffff29;

    /* Old */
    --se-btn-color-fill: var(--se-btn-color-main);
    --se-btn-color-stroke: var(--se-btn-color-main);
}

.se-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
    transition-duration: .24s;
}

.se-btn path {
    transition-property: fill, stroke;
    transition-timing-function: cubic-bezier(.645, .045, .355, 1);
    transition-duration: .24s;
}

.se-btn:hover,
.se-btn:focus-visible,
.se-btn:active {
    text-decoration: none;
}

.se-btn:active:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    border-radius: inherit;
    opacity: .2;
    -webkit-animation: fadeEffect 2s cubic-bezier(.08, .82, .17, 1), waveEffect .4s cubic-bezier(.08, .82, .17, 1);
    animation: fadeEffect 2s cubic-bezier(.08, .82, .17, 1), waveEffect .4s cubic-bezier(.08, .82, .17, 1);
}

@keyframes fadeEffect {
    to {
        opacity: 0;
    }
}

.se-btn i {
    display: flex;
    align-items: center;
}

.se-btn_default {
    color: #fff;
    background: var(--se-btn-color-blue);
}

.se-btn_default:hover {
    background: var(--se-btn-color-blue-hover);
}

.se-btn_default:focus-visible,
.se-btn_default:active {
    background: var(--se-btn-color-blue-active);
}

.se-btn_outline {
    color: var(--se-btn-color-blue);
    background-color: #fff;
    border: 1px solid var(--se-btn-color-blue);
}

.se-btn_outline:hover,
.se-btn_outline:focus-visible,
.se-btn_outline:active {
    color: #fff;
}

.se-btn_outline:hover .se-btn__icon-fill,
.se-btn_outline:focus-visible .se-btn__icon-fill,
.se-btn_outline:active .se-btn__icon-fill {
    fill: var(--se-btn-color-fill);
}

.se-btn_outline:hover .se-btn__icon-stroke,
.se-btn_outline:focus-visible .se-btn__icon-stroke,
.se-btn_outline:active .se-btn__icon-stroke {
    stroke: var(--se-btn-color-stroke);
}

.se-btn_outline:hover {
    background: var(--se-btn-color-blue);
}

.se-btn_outline:focus-visible,
.se-btn_outline:active {
    background: var(--se-btn-color-blue-active);
}

.se-btn_outline-white {
    color: #fff;
    background-color: var(--se-btn-color-blue);
    border: 1px solid #fff;
}

.se-btn_transparent-white {
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    transition: opacity .24s;
}

.se-btn_transparent-white:hover {
    opacity: .6;
}

.se-btn_transparent-white:focus-visible,
.se-btn_transparent-white:active {
    opacity: .8;
}

.se-btn_transparent-white:hover,
.se-btn_transparent-white:focus-visible,
.se-btn_transparent-white:active,
.se-btn_outline-white:hover,
.se-btn_outline-white:focus-visible,
.se-btn_outline-white:active {
    color: #fff;
}

.se-btn_outline-white:hover .se-btn__icon-fill,
.se-btn_outline-white:focus-visible .se-btn__icon-fill,
.se-btn_outline-white:active .se-btn__icon-fill {
    fill: var(--se-btn-color-fill);
}

.se-btn_outline-white:hover .se-btn__icon-stroke,
.se-btn_outline-white:focus-visible .se-btn__icon-stroke,
.se-btn_outline-white:active .se-btn__icon-stroke {
    stroke: var(--se-btn-color-stroke);
}

.se-btn_outline-white:hover {
    background: rgba(255, 255, 255, 0.2);
}

.se-btn_outline-white:focus-visible,
.se-btn_outline-white:active {
    background: rgba(255, 255, 255, 0.4);
}

.se-btn_primary {
    color: var(--se-btn-color-blue);
    background-color: #fff;
}

.se-btn_primary:hover {
    color: var(--se-btn-color-blue);
    background-color: rgba(255, 255, 255, .8);
}

.se-btn_primary:focus-visible,
.se-btn_primary:active {
    color: var(--se-btn-color-blue);
    background-color: rgba(255, 255, 255, .6);
}

.se-btn_disabled.se-btn_primary,
.se-btn_primary:disabled {
    --se-btn-color-fill: var(--se-text-color-blue);
}

.se-btn_secondary {
    color: #fff;
    background-color: var(--se-btn-color-green);
}

.se-btn_secondary:hover {
    color: #fff;
    background: var(--se-btn-color-green-hover);
}

.se-btn_secondary:focus-visible,
.se-btn_secondary:active {
    color: #fff;
    background: var(--se-btn-color-green-active);
}

.se-btn_link {
    color: var(--se-btn-color-blue);
}

.se-btn_link:hover,
.se-btn_link:focus-visible,
.se-btn_link:active {
    color: var(--se-btn-color-blue-hover);
}

.se-btn_link:active:after {
    content: none;
}

.se-btn_link:hover span,
.se-btn_link:focus-visible span,
.se-btn_link :active span {
    text-decoration: underline;
}

.se-btn_error {
    color: #fff;
    background: var(--se-btn-color-error);
}

.se-btn_error:hover,
.se-btn_error:focus-visible,
.se-btn_error:active {
    background: var(--se-btn-color-error-hover);
}

.se-btn_disabled,
.se-btn:disabled {
    pointer-events: none;
    cursor: auto;
    --se-btn-color-fill: var(--se-text-color-disabled);
}

.se-btn_disabled,
.se-btn_disabled:hover,
.se-btn_disabled:active,
.se-btn_disabled:focus-visible,
.se-btn:disabled,
.se-btn:disabled:hover,
.se-btn:disabled:focus-visible,
.se-btn:disabled:active {
    color: var(--se-text-color-disabled);
    background: var(--se-btn-color-disabled);
    border-color: transparent;
    --se-btn-color-fill: var(--se-text-color-disabled);
}

.se-btn_disabled.se-btn_primary,
.se-btn_disabled.se-btn_primary:hover,
.se-btn_disabled.se-btn_primary:active,
.se-btn_disabled.se-btn_primary:focus-visible,
.se-btn_primary:disabled,
.se-btn_primary:disabled:hover,
.se-btn_primary:disabled:focus-visible,
.se-btn_primary:disabled:active {
    color: var(--se-text-color-blue);
    background: var(--se-main-color-blue);
    border-color: transparent;
}

.se-btn_disabled .se-btn__icon-fill,
.se-btn:disabled .se-btn__icon-fill {
    fill: var(--se-btn-color-fill);
}

.se-btn_disabled .se-btn__icon-stroke,
.se-btn:disabled .se-btn__icon-stroke {
    stroke: var(--se-btn-color-stroke);
}

.se-btn_ghost {
    color: #fff;
    border-color: #fff;
    background-color: transparent;
}

.se-btn_ghost:hover {
    color: var(--se-main-color-blue-dark);
    background-color: #fff;
}

.se-btn_large {
    height: 64px;
    padding: 19px 31px;
}

.se-btn_medium {
    height: 48px;
    padding: 11px 31px;
}

.se-btn_small {
    height: 40px;
    padding: 7px 23px;
}

.se-btn_rounded {
    border-radius: 9999px;
}

.se-btn_width-100 {
    width: 100%;
}

.se-btn_icon-left i {
    margin-right: 12px;
}

.se-btn_link.se-btn_icon-left i {
    margin-right: 10px;
}

.se-btn_icon-left.se-btn_large,
.se-btn_icon-left.se-btn_medium {
    padding-left: 27px;
}

.se-btn_icon-left.se-btn_small {
    padding-left: 19px;
}

.se-btn_icon-right i {
    margin-left: 15px;
}

.se-btn_link.se-btn_icon-right i {
    margin-left: 10px;
}

.se-btn_icon-right.se-btn_large,
.se-btn_icon-right.se-btn_medium {
    padding-right: 29px;
}

.se-btn_icon-right.se-btn_small {
    padding-right: 21px;
}

/* Buttons Design UIKit */

.se-btn.se-btn_large.se-btn__icon-right,
.se-btn.se-btn_medium.se-btn__icon-right,
.se-btn.se-btn_small.se-btn__icon-right {
    padding-right: 20px;
}

.se-btn.se-btn_large.se-btn__icon-left,
.se-btn.se-btn_medium.se-btn__icon-left,
.se-btn.se-btn_small.se-btn__icon-left {
    padding-left: 20px;
}

.se-btn_text svg {
    width: 20px;
    height: 20px;
}

.se-btn__icon-left i {
    margin-right: 8px;
}

.se-btn__icon-left.se-btn_text i,
.se-btn__icon-left.se-btn_text-dark i {
    margin-right: 4px;
}

.se-btn__icon-right i {
    margin-left: 8px;
}

.se-btn__icon-right.se-btn_text i,
.se-btn__icon-right.se-btn_text-dark i {
    margin-left: 4px;
}

.se-btn_main {
    color: var(--se-btn-color-main);
    background: var(--se-btn-bg-color-main);
}

.se-btn_main .se-btn__icon-fill path,
.se-btn_main:hover .se-btn__icon-fill path,
.se-btn_main:focus-visible .se-btn__icon-fill path,
.se-btn_main:active .se-btn__icon-fill path {
    fill: var(--se-btn-color-main);
}

.se-btn_main .se-btn__icon-stroke path,
.se-btn_main:hover .se-btn__icon-stroke path,
.se-btn_main:focus-visible .se-btn__icon-stroke path,
.se-btn_main:active .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-main);
}

.se-btn_main-dark {
    color: var(--se-btn-color-main-dark);
    background: var(--se-btn-bg-color-main-dark);
}

.se-btn_main-dark .se-btn__icon-fill path,
.se-btn_main-dark:hover .se-btn__icon-fill path,
.se-btn_main-dark:focus-visible .se-btn__icon-fill path,
.se-btn_main-dark:active .se-btn__icon-fill path {
    fill: var(--se-btn-color-main-dark);
}

.se-btn_main-dark .se-btn__icon-stroke path,
.se-btn_main-dark:hover .se-btn__icon-stroke path,
.se-btn_main-dark:focus-visible .se-btn__icon-stroke path,
.se-btn_main-dark:active .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-main-dark);
}

.se-btn_scnd {
    color: var(--se-btn-color-scnd);
    background: var(--se-btn-bg-color-scnd);
}

.se-btn_scnd .se-btn__icon-fill path,
.se-btn_scnd:hover .se-btn__icon-fill path,
.se-btn_scnd:focus-visible .se-btn__icon-fill path,
.se-btn_scnd:active .se-btn__icon-fill path {
    fill: var(--se-btn-color-scnd);
}

.se-btn_scnd .se-btn__icon-stroke path,
.se-btn_scnd:hover .se-btn__icon-stroke path,
.se-btn_scnd:focus-visible .se-btn__icon-stroke path,
.se-btn_scnd:active .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-scnd);
}

.se-btn_tert {
    color: var(--se-btn-color-tert);
    border-color: var(--se-btn-color-tert);
    background: var(--se-btn-bg-color-tert);
}

.se-btn_tert .se-btn__icon-fill path {
    fill: var(--se-btn-color-tert);
}

.se-btn_tert .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-tert);
}

.se-btn_tert-dark {
    color: var(--se-btn-color-tert-dark);
    border-color: var(--se-btn-color-tert-dark);
    background: var(--se-btn-bg-color-tert-dark);
}

.se-btn_tert-dark .se-btn__icon-fill path,
.se-btn_tert-dark:hover .se-btn__icon-fill path,
.se-btn_tert-dark:focus-visible .se-btn__icon-fill path,
.se-btn_tert-dark:active .se-btn__icon-fill path {
    fill: var(--se-btn-color-tert-dark);
}

.se-btn_tert-dark .se-btn__icon-stroke path,
.se-btn_tert-dark:hover .se-btn__icon-stroke path,
.se-btn_tert-dark:focus-visible .se-btn__icon-stroke path,
.se-btn_tert-dark:active .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-tert-dark);
}

.se-btn_disabled,
.se-btn_disabled:hover,
.se-btn_disabled:active,
.se-btn_disabled:focus-visible,
.se-btn:disabled,
.se-btn:disabled:hover,
.se-btn:disabled:focus-visible,
.se-btn:disabled:active {
    color: var(--se-btn-color-disabled);
    background: var(--se-btn-bg-color-disabled);
    border-color: var(--se-btn-color-disabled);
}

.se-btn_disabled .se-btn__icon-stroke path,
.se-btn_disabled:hover .se-btn__icon-stroke path,
.se-btn_disabled:focus-visible .se-btn__icon-stroke path,
.se-btn_disabled:active .se-btn__icon-stroke path {
    stroke: var(--main-colors-dark-grey);
}

.se-btn_disabled .se-btn__icon-fill path,
.se-btn_disabled:hover .se-btn__icon-fill path,
.se-btn_disabled:focus-visible .se-btn__icon-fill path,
.se-btn_disabled:active .se-btn__icon-fill path {
    fill: var(--main-colors-dark-grey);
}

.se-btn_disabled-dark,
.se-btn_disabled-dark:hover,
.se-btn_disabled-dark:focus-visible,
.se-btn_disabled-dark:active {
    color: var(--se-btn-color-dark-disabled);
    background: var(--se-btn-bg-color-dark-disabled);
    border-color: var(--se-btn-bg-color-dark-disabled);
    pointer-events: none;
}

.se-btn_disabled-dark .se-btn__icon-stroke path,
.se-btn_disabled-dark:hover .se-btn__icon-stroke path,
.se-btn_disabled-dark:focus-visible .se-btn__icon-stroke path,
.se-btn_disabled-dark:active .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-dark-disabled);
}

.se-btn_disabled-dark .se-btn__icon-fill path,
.se-btn_disabled-dark:hover .se-btn__icon-fill path,
.se-btn_disabled-dark:focus-visible .se-btn__icon-fill path,
.se-btn_disabled-dark:active .se-btn__icon-fill path {
    fill: var(--se-btn-color-dark-disabled);
}

.se-btn_text {
    --se-btn-color-text-blue: var(--main-colors-blue);
    --se-btn-color-text-blue-hover: var(--main-colors-blue-dark);
    --se-btn-color-text-blue-active: var(--main-colors-blue-darker);
    --se-btn-color-text-white: #fff;
    --se-btn-color-text-white-hover: #fff;
    --se-btn-color-text-white-active: var(--main-colors-dark-grey-2);
    --se-btn-color-text-black: var(--main-colors-black);
    --se-btn-color-text-black-hover: var(--main-colors-blue);
    --se-btn-color-text-black-active: var(--main-colors-blue-dark);

    --se-btn-color-text-disabled: var(--main-colors-dark-grey);

    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 140%;
    font-weight: 500;
}

.se-btn_text-blue {
    color: var(--se-btn-color-text-blue);
}

.se-btn_text-white {
    color: var(--se-btn-color-text-white);
}

.se-btn_text-black {
    color: var(--se-btn-color-text-black);
}

.se-btn_text i {
    display: contents;
}

.se-btn_text.se-btn_disabled {
    color: var(--se-btn-color-text-disabled);
}

.se-btn_text-blue .se-btn__icon-fill path {
    fill: var(--se-btn-color-text);
}

.se-btn_text-white .se-btn__icon-fill path {
    fill: var(--se-btn-color-text-white);
}

.se-btn_text-black .se-btn__icon-fill path {
    fill: var(--se-btn-color-text-black);
}

.se-btn_text-blue .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-text-blue);
}

.se-btn_text-white .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-text-white);
}

.se-btn_text-black .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-text-black);
}

.se-btn_text.se-btn_disabled .se-btn__icon-fill path {
    fill: var(--se-btn-color-text-disabled);
}

.se-btn_text.se-btn_disabled .se-btn__icon-stroke path {
    stroke: var(--se-btn-color-text-disabled);
}

@media screen and (min-width: 1024px) {
    .se-btn_main:hover {
        background: var(--se-btn-bg-color-main-hover);
    }

    .se-btn_main:focus-visible,
    .se-btn_main:active {
        background: var(--se-btn-bg-color-main-active);
    }

    .se-btn_main-dark:hover {
        background: var(--se-btn-bg-color-main-dark-hover);
    }

    .se-btn_main-dark:focus-visible,
    .se-btn_main-dark:active {
        background: var(--se-btn-bg-color-main-dark-active);
    }

    .se-btn_scnd:hover {
        background: var(--se-btn-bg-color-scnd-hover);
    }

    .se-btn_scnd:focus-visible,
    .se-btn_scnd:active {
        background: var(--se-btn-bg-color-scnd-active);
    }

    .se-btn_tert:hover {
        color: var(--se-btn-color-tert-hover);
        border-color: var(--se-btn-color-tert-hover);
        background: var(--se-btn-bg-color-tert-hover);
    }

    .se-btn_tert:focus-visible,
    .se-btn_tert:active {
        color: var(--se-btn-color-tert-active);
        border-color: var(--se-btn-color-tert-active);
        background: var(--se-btn-bg-color-tert-active);
    }

    .se-btn_tert:hover .se-btn__icon-fill path {
        fill: var(--se-btn-color-tert-hover);
    }

    .se-btn_tert:focus-visible .se-btn__icon-fill path,
    .se-btn_tert:active .se-btn__icon-fill path {
        fill: var(--se-btn-color-tert-active);
    }

    .se-btn_tert:hover .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-tert-hover);
    }

    .se-btn_tert:focus-visible .se-btn__icon-stroke path,
    .se-btn_tert:active .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-tert-active);
    }

    .se-btn_tert-dark:hover {
        background: var(--se-btn-bg-color-tert-dark-hover);
    }

    .se-btn_tert-dark:focus-visible,
    .se-btn_tert-dark:active {
        background: var(--se-btn-bg-color-tert-dark-active);
    }

    .se-btn_text:hover {
        cursor: pointer;
    }

    .se-btn_text-blue:hover {
        text-decoration: none;
        color: var(--se-btn-color-text-blue-hover);
    }

    .se-btn_text-white:hover {
        color: var(--se-btn-color-text-white-hover);
    }

    .se-btn_text-black:hover {
        color: var(--se-btn-color-text-black-hover);
    }

    .se-btn_text-blue:focus-visible,
    .se-btn_text-blue:active {
        color: var(--se-btn-color-text-blue-active);
    }

    .se-btn_text-white:focus-visible,
    .se-btn_text-white:active {
        color: var(--se-btn-color-text-white-active);
    }

    .se-btn_text-black:focus-visible,
    .se-btn_text-black:active {
        color: var(--se-btn-color-text-black-active);
    }

    .se-btn_text-blue:hover .se-btn__icon-fill path {
        fill: var(--se-btn-color-text-blue-hover);
    }

    .se-btn_text-white:hover .se-btn__icon-fill path {
        fill: var(--se-btn-color-text-white-hover);
    }

    .se-btn_text-black:hover .se-btn__icon-fill path {
        fill: var(--se-btn-color-text-black-hover);
    }

    .se-btn_text-blue:hover .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-text-blue-hover);
    }

    .se-btn_text-white:hover .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-text-white-hover);
    }

    .se-btn_text-black:hover .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-text-black-hover);
    }

    .se-btn_text-blue:focus-visible .se-btn__icon-fill path,
    .se-btn_text-blue:active .se-btn__icon-fill path {
        fill: var(--se-btn-color-text-blue-active);
    }

    .se-btn_text-white:focus-visible .se-btn__icon-fill path,
    .se-btn_text-white:active .se-btn__icon-fill path {
        fill: var(--se-btn-color-text-white-active);
    }

    .se-btn_text-black:focus-visible .se-btn__icon-fill path,
    .se-btn_text-black:active .se-btn__icon-fill path {
        fill: var(--se-btn-color-text-black-active);
    }

    .se-btn_text-blue:focus-visible .se-btn__icon-stroke path,
    .se-btn_text-blue:active .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-text-blue-active);
    }

    .se-btn_text-white:focus-visible .se-btn__icon-stroke path,
    .se-btn_text-white:active .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-text-white-active);
    }

    .se-btn_text-black:focus-visible .se-btn__icon-stroke path,
    .se-btn_text-black:active .se-btn__icon-stroke path {
        stroke: var(--se-btn-color-text-black-active);
    }
}

@media screen and (min-width: 1536px) {
    .se-btn_text {
        font-size: 20px;
    }

    .se-btn_text svg {
        width: 24px;
        height: 24px;
    }

    .se-btn.se-btn_large.se-btn__icon-right,
    .se-btn.se-btn_medium.se-btn__icon-right {
        padding-right: 27px;
    }

    .se-btn.se-btn_large.se-btn__icon-left,
    .se-btn.se-btn_medium.se-btn__icon-left {
        padding-left: 27px;
    }
}