.custom-input {
    position: relative;

    box-shadow: var(--box-shadow);

    border-radius: var(--border-radius_s);

    transition: box-shadow 0.5s ease-in-out;
}

.custom-input:hover {
    box-shadow: var(--box-shadow_active);
}

.custom-input.custom-input_search:focus .custom-input__input,
.custom-input.custom-input_search:hover .custom-input__input {
    min-width: 21rem;
}

.custom-input.custom-input_subscribe:focus .custom-input__input,
.custom-input.custom-input_subscribe:hover .custom-input__input {
    background-color: rgba(38, 44, 46, 0.75);
}

.custom-input.custom-input_subscribe .custom-input__input {
    min-width: 24rem;

    color: var(--secondary-color);

    background-color: #262c2e;

    border-radius: var(--border-radius_s);
}

.custom-input__input {
    /* padding-left: 1.5rem; */
    padding-left: calc(16px + (24 - 16) * (100vw - 320px) / (1920 - 320));
    padding-right: 3rem;

    min-width: 17.75rem;
    height: 3rem;

    font-size: calc(14px + (16 - 14) * (100vw - 320px) / (1920 - 320));

    transition: min-width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.custom-input__button {
    position: absolute;

    top: 50%;
    right: 1rem;
    transform: translate(0, -50%);

    cursor: pointer;
}

/* menu-content */

.menu-content .custom-input__input {
    width: 100%;

    background-color: #fff;

    border-radius: var(--border-radius_s);
}

.menu-content .custom-input:hover .custom-input__input {
    background-color: rgba(255, 255, 255, 0.75);
}