/* Orange Button */
.webform-submission-company-financing-form .form-item-match-financing a,
#edit-contact-form .webform-section-wrapper .webform-actions input,
.webform-submission-form .webform-actions input,
.paragraph--type--banner-top .field--name-field-links .field__item a,
.button-1,
.button {
    background-color: var(--color-orange-2);
    border: 1px solid var(--color-orange-2);
    font-size: var(--font-size-14);
    color: var(--color-gray-0);
    font-weight: var(--font-medium);
    padding: 12px 20px;
    text-decoration: none;
    transition: all ease 0.4s;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    
    &.hide {
      display: none;      
    }
    
    &:hover {
        background-color: var(--color-orange-4);
        border: 1px solid var(--color-orange-4);
    }

    &[target="_blank"] {
        &:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background-image: url("../../images/icons/link-icon.svg");
            margin-left: 10px;
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
        }
    }
}

/* Orange Button Reversed */
.paragraph--type--banner-top .field--name-field-links .field__item:nth-of-type(2) a,
.button-1-reversed {
    background-color: var(--color-gray-0);
    font-size: var(--font-size-14);
    color: var(--color-orange-2);


    &:hover {
        background-color: var(--color-orange-0) !important;
    }

    &[target="_blank"] {
        &:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background-image: url("../../images/icons/link-icon.svg");
            margin-left: 10px;
            filter: brightness(0) saturate(100%) invert(39%) sepia(45%) saturate(5977%) hue-rotate(353deg) brightness(99%) contrast(85%);
        }
    }
}




/* Offer Button */


.paragraph--type--embed-view .view-brand-offer .views-row .view-offer a {

    background-color: var(--color-gray-0);
    border: 1px solid var(--color-gray-2);
    font-size: var(--font-size-16);
    color: var(--color-gray-7);
    font-weight: var(--font-semibold);
    padding: 12px 20px;
    text-decoration: none;
    transition: all ease 0.4s;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: center;

    &:hover {
        background-color: var(--color-gray-11);
        border-color: var(--color-gray-3);
    }
}





/* White Button with blue text */
.paragraph--type--blue-tile .field--name-field-read-more-link a {
    background-color: var(--color-gray-0);
    border: 1px solid var(--color-gray-2);
    font-size: var(--font-size-14);
    color: var(--color-blue-2);
    font-weight: var(--font-medium);
    padding: 12px 20px;
    text-decoration: none;
    transition: all ease 0.4s;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: fit-content;

    &:hover {
        background-color: var(--color-gray-11);
    }

    &[target="_blank"] {
        &:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background-image: url("../../images/icons/link-icon.svg");
            margin-left: 10px;
        }

    }
}

/* White Button with dark text */
.paragraph--type--from-library:has(.swiper .node--type-blog) .field--name-field-links .field__item a,
.paragraph--type--embed-view:has(.view-used-cars-brands) .view-used-cars-brands .view-offer a,
.paragraph--type--tiles-with-leads .field--name-field-links a,
.node--type-blog.node--view-mode-full .next-prev a {
    background-color: var(--color-gray-0);
    border: 1px solid var(--color-gray-2);
    font-size: var(--font-size-14);
    color: var(--color-gray-7);
    font-weight: var(--font-medium);
    padding: 12px 20px;
    text-decoration: none;
    transition: all ease 0.4s;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: fit-content;
    justify-content: center;

    &:hover {
        background-color: var(--color-gray-11);
    }

    &[target="_blank"] {
        &:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background-image: url("../../images/icons/link-icon.svg");
            margin-left: 10px;
            filter: brightness(0) saturate(100%)
        }

    }
}


/* White Button with blue text Link */
.button-2 {
    background-color: var(--color-gray-0);
    border: 1px solid var(--color-gray-2);
    font-size: var(--font-size-14);
    color: var(--color-blue-2);
    font-weight: var(--font-medium);
    padding: 12px 20px;
    text-decoration: none;
    transition: all ease 0.4s;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    white-space: nowrap;

    &[target="_blank"] {
        &:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            background-image: url("../../images/icons/link-icon.svg");
            margin-left: 4px;
        }


    }

}



.swiper-button-prev,
.swiper-button-next {
    position: relative;
    transform: translate(0, 0);
    background-color: var(--color-gray-0);
    border: 1px solid var(--color-gray-2);
    margin: 0;
    padding: 0;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    transition: all ease 0.4s;

    &:hover {
        background-color: var(--color-gray-11);

    }

    &:after {
        display: block;
        width: 24px;
        height: 24px;
        font-family: unset;
        font-size: unset;
        text-transform: unset !important;
        letter-spacing: unset;
        font-variant: unset;
        line-height: unset;
        content: url(../../images/icons/arrow-right.svg);
    }
}

.swiper-button-prev {
    &:after {
        transform: rotate(180deg);
    }

}

/* ask for an offer button when the installment is less than 0 */

.webform-section a[disabled].button-1 {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}