.btn.with-icon.special-btn {
    --_icon-height: 1.5rem;
    position: relative;
    font-size: clamp(0.875rem, 0.733rem + 0.297vw, 1rem);
    background-color: var(--color-contrast3);
    padding: 0.25rem;
    padding-right: 0.75rem;
    gap: 0.75rem;
    border-radius: 4px;
    /* white-space: normal; */
    text-align: left;
    overflow: hidden;
}
.btn.with-icon.special-btn > svg {
    background-color:var(--color-accent);
    border-radius:4px;
}

.btn.with-icon.special-btn .arrow-wrapper {
    display: flex;
    align-items: center;
    --_icon-height: 20px;
    transition: 0.2s all ease-in-out;
}

@media only screen and (min-width: 768px) { /* desktop */
    .btn.with-icon.special-btn > span {
        position: relative;
        overflow: unset;
        transition: 0.2s all ease-in-out;
    }
    .btn.with-icon.special-btn > span::after {
        content: attr(data-hover-text);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: var(--color-contrast3);
        transform: translateY(200%);
        transition: 0.2s all ease-in-out;
    }
    .btn.with-icon.special-btn:hover > span {
        transform: translateY(-200%);
    }

    .btn.with-icon.special-btn:hover .arrow-wrapper {
        margin-left: 0.25rem;
    }
}

@media only screen and (max-width: 767px) { /* mobile */
    .btn.special-btn {
        width: 100%;
    }
    .btn.special-btn span {
        text-overflow: clip;
    }
    .btn.with-icon.special-btn .arrow-wrapper {
        position: absolute;
        background: linear-gradient(to right, transparent 0%, var(--color-contrast3) 30%);
        padding-right: 0.75rem;
        padding-left: 1.5rem;
        top: 0;
        right: 0;
        bottom: 0;
    }
}