.transp-button {
    padding: 4px 12px;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease-in-out;
}

@media (min-width: 1440px) {
    .transp-button {
        padding: 8px 16px;
        font-size: 16px;
        font-weight: 500;
    }
}

.transp-button:hover:not(:disabled) {
    background-color: var(--gray);
}

.transp-button:active:not(:disabled) {
    background-color: var(--red-light);
    color: var(--red);
    transition-duration: 0s;
}

.transp-button:disabled {
    color: var(--gray-dark);
}

.transp-button 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;
}

.transp-button:active img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(4320%)
        hue-rotate(344deg) brightness(92%) contrast(97%);
    transition-duration: 0s;
}

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

.transp-button_svg {
    padding: 6px 16px 6px 8px !important;
}