.btn {
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    padding: 12px 24px;
    min-width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    line-height: 24px;
    position: relative;
    font-size: 16px;
    font-weight: 500;
}

/* Red */
.btn_red {
    background-color: var(--red);
    font-weight: 700;
    color: white;
    box-shadow:
        0px 0px 0px 0px rgba(0, 18, 61, 0.1),
        0px 0px 0px 0px rgba(0, 18, 61, 0.09),
        0px 0px 0px 0px rgba(0, 18, 61, 0.05),
        0px 0px 0px 0px rgba(0, 18, 61, 0.01),
        0px 0px 0px 0px rgba(0, 18, 61, 0.18);
}

/* White */
.btn_white {
    background-color: white;
}

/* Black */
.btn_black {
    background-color: var(--black);
    font-size: 16px;
    font-weight: 500;
    color: white;
}

/* General for black and red */
.btn_red:hover:not(:disabled):not(:active),
.btn_black:hover:not(:disabled):not(:active) {
    box-shadow:
        1px 1px 3px 0px rgba(0, 18, 61, 0.1),
        4px 3px 5px 0px rgba(0, 18, 61, 0.09),
        8px 6px 6px 0px rgba(0, 18, 61, 0.05),
        15px 11px 7px 0px rgba(0, 18, 61, 0.01),
        2px 2px 4px 0px rgba(0, 18, 61, 0.1);
}

.btn_red:active,
.btn_black:active {
    box-shadow:
        0px 0px 0px 0px rgba(0, 18, 61, 0.1),
        0px 0px 0px 0px rgba(0, 18, 61, 0.09),
        0px 0px 0px 0px rgba(0, 18, 61, 0.05),
        0px 0px 0px 0px rgba(0, 18, 61, 0.01),
        0px 0px 0px 0px rgba(0, 18, 61, 0.18);
    transition-duration: 50ms;
}

.btn_red:disabled,
.btn_black:disabled {
    background-color: var(--gray-dark);
}

/* Secondary */
.secondary-btn {
    background-color: var(--gray);
    font-size: 16px;
    font-weight: 500;
}

.secondary-btn:hover:not(:disabled) {
    color: var(--red);
}

.secondary-btn:active {
    background-color: var(--red-light);
    transition-duration: 0s;
}

.secondary-btn:disabled {
    background-color: var(--gray);
    color: var(--gray-dark);
}

/* Changing icon color */
.secondary-btn img {
    filter: brightness(0) saturate(100%) invert(1%) sepia(10%) saturate(4931%)
        hue-rotate(220deg) brightness(105%) contrast(86%);
    transition: all 0.2s ease-in-out;
}

.secondary-btn:hover:not(:disabled) img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(4320%)
        hue-rotate(344deg) brightness(92%) contrast(97%);
}

.secondary-btn:disabled img {
    filter: brightness(0) saturate(100%) invert(63%) sepia(9%) saturate(580%)
        hue-rotate(179deg) brightness(86%) contrast(89%);
}

@media (max-width: 1439px) {
    .btn {
        font-size: 14px;
        font-weight: 500;
    }
}