/* Указываем box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
    padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
    list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
    max-width: 100%;
    display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
    margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
    font: inherit;
}

input {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*=========================================*/

.container {
    width: 351px;
    margin: 0 auto;
}

.delimiter {
    width: 100%;
    height: 40px;
}

/*BLUE BUTTON #1*/
/*general styles for btn*/
.button {
    font: var(--semiblod-title-3);
    border-radius: 100px;
    cursor: pointer;
    text-transform: capitalize;
    position: relative;
}

/*custom styles*/
.button--blue {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    color: var(--background);
    transition: all 0.2s ease;
}

.button--blue:hover {
    background: var(--hover);
    transition: all 0.2s ease;
}

.button--blue:disabled {
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*BLUE BUTTON #2*/
/*general styles for btn*/
.button {
    font-family: "Inter", serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
}

/*custom styles*/
.button--add {
    width: 181px;
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    border: none;
    color: var(--background);
    transition: all 0.2s ease;
    padding: 0 15px;
}

.button--add:hover {
    background: var(--hover);
    transition: all 0.2s ease;
}

.button--add:disabled {
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*BLUE BUTTON #3*/


/*custom styles*/
.button--back {
    width: 215px;
    height: 48px;
    min-height: 48px;
    background: var(--secondary);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--dark-text);
    border: 1px solid var(--lines);
    position: relative;
}

.button--back > .icon-arrow-left {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 9px;
    left: 12px;
    stroke: var(--dark-text);
    transition: all 0.2s ease;
}

.button--back:hover {
    color: var(--primary);
    transition: all 0.2s ease;
}

.button--back:hover > .icon-arrow-left {
    stroke: var(--primary);
    transition: all 0.2s ease;
}

.button--back:disabled {
    border: none;
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

.button--back:disabled > .icon-arrow-left {
    stroke: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

.button--next {
    background: var(--primary);
    color: var(--background);
    &:hover {
        color: var(--background);
        background: var(--hover);
    }
    &:disabled {
        color: var(--background);
    }
}

.button--next > .icon-arrow-left {
    transform: rotate(180deg);
    right: 12px;
    left: auto;
    & path {
        stroke: var(--background);
    }
}

/*BLUE BUTTON #4*/


/*custom styles*/
.button--change {
    width: 83px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
}

.button--change:hover {
    color: var(--primary);
    transition: all 0.2s ease;
}

.button--change:disabled {
    border: none;
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*WHITE BUTTON #5*/


/*custom styles*/
.button--white {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 154px;
    height: 48px;
    background: var(--background);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
}

.button--white:hover {
    background: var(--secondary);
    transition: all 0.2s ease;
}

.button--white:disabled {
    border: none;
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

@media (max-width: 768px) {
    .button--white {
        width: 112.5px;
        height: 36px;
        font: 600 12px/14.52px "Inter", serif;
    }

    .button--back > svg.icon-arrow-left {
        top: 3px;
        right: 2px;
    }
}

/*WHITE BUTTON #6*/


/*custom styles*/
.button--attach {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 154px;
    height: 48px;
    background: var(--background);
    border: 1px solid var(--lines);
    position: relative;
    color: var(--dark-text);
    transition: all 0.2s ease;
}

.button--attach > .icon-download {
    margin-right: 8px;
    & path {
        fill: var(--dark-text);
    }
}

.button--attach:hover {
    background: var(--secondary);
    transition: all 0.2s ease;
}

.button--attach:disabled {
    border: none;
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

.button--attach:disabled > .icon-download {
    stroke: var(--disabled-text);
    fill: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*WHITE BUTTON #7*/


/*custom styles*/
.button--edit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15.5px 24px;
    width: fit-content;
    height: 48px;
    background: var(--background);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.button--edit > .icon-edit {
    margin-right: 8px;
    stroke: var(--dark-text);
    fill: var(--background);
    transition: all 0.2s ease;
}

.button--edit:hover {
    background: var(--secondary);
    transition: all 0.2s ease;
}

.button--edit:hover > .icon-edit {
    fill: var(--secondary);
    transition: all 0.2s ease;
}

.button--edit:disabled {
    border: none;
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

.button--edit:disabled > .icon-edit {
    stroke: var(--disabled-text);
    fill: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

/*WHITE BUTTON #8*/


/*custom styles*/
.button--link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 154px;
    height: 48px;
    background: var(--background);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
    font: var(--regular-text);
}

.button--link > .icon-link {
    margin-right: 8px;
    stroke: var(--dark-text);
    fill: var(--background);
    transition: all 0.2s ease;
}

.button--link:hover {
    background: var(--secondary);
    transition: all 0.2s ease;
}

.button--link:hover > .icon-link {
    fill: var(--secondary);
    transition: all 0.2s ease;
}

.button--link:disabled {
    border: none;
    background: var(--grey-icons);
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

.button--link:disabled > .icon-link {
    stroke: var(--disabled-text);
    fill: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}


/*WHITE BUTTON #9*/


/*custom styles*/
.button--upload {
    min-width: 184px;
    max-width: 268px;
    height: 50px;
    background: var(--background);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
    font: var(--regular-text);
    display: grid;
    grid-template-columns: auto 20px;
    grid-template-rows: repeat(2, 1fr);
    gap: 2px 16px;
    padding: 0 24px;
    text-align: start;
}

.button--upload > .button__upload-text {
    font: var(--regular-text);
    grid-area: 1 / 1 / 2 / 2;
    align-self: end;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.button--upload > .button__upload-text--secondary {
    font: var(--regular-caption);
    grid-area: 2 / 1 / 3 / 2;
    text-transform: uppercase;
    color: var(--text-grey);
    font-size: 12px;
    align-self: start;
}

.button--upload > .icon-upload {
    grid-area: 1 / 2 / 3 / 3;
    align-self: center;
    stroke: var(--dark-text);
    fill: var(--background);
    transition: all 0.2s ease;
}

.button--upload:hover {
    background: var(--secondary);
    transition: all 0.2s ease;
}

.button--upload:hover > .icon-upload {
    fill: var(--secondary);
    transition: all 0.2s ease;
}

.button--upload:disabled {
    background: var(--grey-icons);
    color: var(--disabled-text);
    border: none;
    pointer-events: none;
    cursor: default;
}

.button--upload:disabled > .button__upload-text--secondary {
    color: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

.button--upload:disabled > .icon-upload {
    stroke: var(--disabled-text);
    fill: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

/*BLUE BUTTON #10*/


/*custom styles*/
.button.button--reset {
    width: 135px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
    font: var(--regular-text);
    gap: 0 6px;
}

.button--reset > .icon-reset {
    fill: #141414;
    stroke: #141414;
}

.button--reset:disabled {
    background: var(--grey-icons);
    color: var(--disabled-text);
    border: none;
    pointer-events: none;
    cursor: default;
}

.button--reset:disabled > .icon-reset {
    fill: var(--disabled-text);
    stroke: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*WHITE BUTTON #11*/


/*custom styles*/
.button--small-white {
    width: fit-content;
    padding: 0 12px;
    white-space: nowrap;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border: 1px solid var(--lines);
    color: var(--dark-text);
    transition: all 0.2s ease;
    font: var(--regular-caption);
}

.button--small-white:hover {
    background: var(--secondary);
    border: 1px solid #C7D0E3;
    transition: all 0.2s ease;
}

.button--small-white:disabled {
    background: var(--grey-icons);
    color: var(--disabled-text);
    border: none;
    pointer-events: none;
    cursor: default;
}

/*WHITE BUTTON #12*/
.button--arrow-left {
    width: 36px;
    height: 36px;
    border: 1px solid var(--lines);
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button--arrow-left > .icon-left {
    fill: var(--dark-text);
    stroke: var(--dark-text);
    transition: all 0.2s ease;
}

.button--arrow-left:hover {
    background: var(--lines);
    transition: all 0.2s ease;
}

.button--arrow-left:disabled {
    background: var(--grey-icons);
    border: none;
    pointer-events: none;
    cursor: default;
}

.button--arrow-left:disabled > .icon-left {
    fill: var(--disabled-text);
    stroke: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*WHITE BUTTON #13*/
/*custom styles for btn*/
.button--arrow-right {
    width: 36px;
    height: 36px;
    border: 1px solid var(--lines);
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button--arrow-right > .icon-right {
    fill: var(--dark-text);
    stroke: var(--dark-text);
    transition: all 0.2s ease;
}

.button--arrow-right:hover {
    background: var(--lines);
    transition: all 0.2s ease;
}

.button--arrow-right:disabled {
    background: var(--grey-icons);
    border: none;
    pointer-events: none;
    cursor: default;
}

.button--arrow-right:disabled > .icon-right {
    fill: var(--disabled-text);
    stroke: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}


/*LINKS #14*/
/*custom styles for btn*/
.link--see-less-more {
    color: var(--primary);
    font: var(--regular-text);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    width: 84px;
    align-items: center;
    justify-content: space-between;
}

.link--see-less-more.less-up > .icon-see-less {
    stroke: var(--primary);
    transition: all 0.2s ease;
}

.link--see-less-more.more-down > .icon-see-less {
    transform: rotate(180deg);
    transition: all 0.2s ease;
    stroke: var(--primary);
}

.link--see-less-more:hover {
    color: var(--hover);
    transition: all 0.2s ease;
}

.link--see-less-more:hover > .icon-see-less {
    stroke: var(--hover);
    transition: all 0.2s ease;
}

.link--see-less-more.disabled {
    color: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

.link--see-less-more.disabled > .icon-see-less {
    stroke: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

/*LINKS #15*/
/*custom styles for btn*/
.link--blue-underlined {
    color: var(--primary);
    font: var(--regular-text);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s ease;
}

.link--blue-underlined:hover {
    color: var(--hover);
    transition: all 0.2s ease;
}

.link--blue-underlined.disabled {
    color: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

/*LINKS #16*/
/*custom styles for btn*/
.link--name {
    color: var(--dark-text);
    font: var(--regular-text);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s ease;
}

.link--name:hover {
    color: var(--primary);
    transition: all 0.2s ease;
}

.link--name.disabled {
    color: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

/*LINKS #17*/
/*custom styles for btn*/
.link--cloud-attach {
    width: 38px;
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.link--cloud-attach > .icon-cloud {
    fill: var(--secondary);
    transition: all 0.2s ease;
}

.link--cloud-attach > .icon-cloud-attach {
    stroke: var(--primary);
    position: absolute;
    top: 8px;
    left: 11px;
    transition: all 0.2s ease;
}

.link--cloud-attach:hover > .icon-cloud {
    fill: var(--hover);
    transition: all 0.2s ease;
}

.link--cloud-attach:hover > .icon-cloud-attach {
    stroke: var(--dark-text);
    transition: all 0.2s ease;
}

.link--cloud-attach.disabled > .icon-cloud {
    fill: var(--grey-icons);
    pointer-events: none;
    cursor: default;
}

.link--cloud-attach.disabled > .icon-cloud-attach {
    stroke: var(--disabled-text);
    pointer-events: none;
    cursor: default;
}

/*LINKS #18*/
/*custom styles for btn*/
.button--trash {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--lines);
    transition: all 0.2s ease;
    background: var(--background);
}

.button--trash > .icon-trash {
    stroke: var(--dark-text);
    transition: all 0.2s ease;
}

.button--trash:hover {
    background: var(--secondary);
    transition: all 0.2s ease;
}
.button--trash:disabled {
    background: var(--grey-icons);
    border: none;
    pointer-events: none;
    cursor: default;
}
.button--trash:disabled > .icon-trash {
    stroke: var(--disabled-text);
}

.button__icon {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font: var(--semiblod-title-3);
    transition: 0.3s;
    & path {
        transition: 0.3s;
        stroke: var(--primary);
    }
    & span {
        white-space: nowrap;
    }
}

.button__icon:hover {
    color: var(--hover);
    & path {
        stroke: var(--hover);
    }
}

.button__icon:disabled {
    color: var(--grey-icons);
    cursor: auto;
    & path {
        stroke: var(--grey-icons);
    }
}

@media (max-width: 768px) {
    .button--blue {
        height: 40px;
        font: var(--mobile-title-4);
    }

    .button--trash {
        width: 32px;
        height: 32px;
    }

    .button.button--reset {
        height: 36px;
        font: var(--mobile-text);
        gap: 8px;
        width: 125px;
    }
}