@import url("../../../icomoon/style.css");

/* Change button style for small screens */

@media (max-width: 782px) {
    .wp-block-button .wp-block-button__link {
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
        font-size: 18px;
    }
}

/* Add arrows to buttons */

.wp-block-button__link {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
}

.wp-block-button__link:before,
.wp-block-button__link:after {
    content: "\e914";
    font-family: "icomoon" !important;
    width: calc(28px + 15px);
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 100;
}

.wp-block-button__link:after {
    margin-left: auto;
    padding-left: 15px;
}

.wp-block-button__link:before {
    margin-left: calc(-28px - 15px);
    opacity: 0;
    padding-right: 15px;
    transform: translateX(-28px);
}

/* Make arrows move when hovering */

.wp-block-button__link:hover:before,
.wp-block-post > .wp-block-group:hover .wp-block-button__link:before {
    opacity: 1;
    margin-left: 0;
    transform: translateX(0);
}

.wp-block-button__link:hover:after,
.wp-block-post > .wp-block-group:hover .wp-block-button__link:after {
    opacity: 0;
    margin-right: calc(-28px - 15px);
    transform: translateX(28px);
}

/* Add hover state for outline button */

.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link.has-text-color:hover,
[class*="is-style-section-primary"] .wp-block-button__link:hover,
[class*="is-style-section-primary"] .is-style-outline > .wp-block-button__link:hover,
.wp-block-post > .wp-block-group:hover .wp-block-button__link {
    background-color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
}

/* Add active state */

.wp-block-button__link:active,
.is-style-outline > .wp-block-button__link:active,
.wp-block-post > .wp-block-group:active .wp-block-button__link {
    background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 80%, var(--wp--preset--color--contrast));
    border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 80%, var(--wp--preset--color--contrast));
    color: var(--wp--preset--color--base);
}

/* Add icons for button styles */

.is-style-calendar > .wp-block-button__link:before,
.is-style-calendar > .wp-block-button__link:after {
    content: "\e95e";
}

.is-style-phone > .wp-block-button__link:before,
.is-style-phone > .wp-block-button__link:after {
    content: "\e994";
}

.is-style-mail > .wp-block-button__link:before,
.is-style-mail > .wp-block-button__link:after {
    content: "\e9ab";
}

.is-style-whatsapp > .wp-block-button__link:before,
.is-style-whatsapp > .wp-block-button__link:after {
    content: "\ea44";
}

.is-style-back > .wp-block-button__link:before,
.is-style-back > .wp-block-button__link:after {
    content: "\e913";
}

/* Switch icon sides for back button */
.is-style-back > .wp-block-button__link:after {
    opacity: 0;
    margin-right: calc(-28px - 15px);
    transform: translateX(28px);
}

.is-style-back > .wp-block-button__link:before {
    opacity: 1;
    margin-left: 0;
    transform: translateX(0);
}

.is-style-back > .wp-block-button__link:hover:before {
    opacity: 0;
    margin-left: calc(-28px - 15px);
    transform: translateX(-28px);
}

.is-style-back > .wp-block-button__link:hover:after {
    opacity: 1;
    margin-right: 0;
    transform: translateX(0);
}

/* Make sure everything works with all section styles */
[class*="is-style-section-primary"] .is-style-outline > .wp-block-button__link {
    border-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--base);
}

/* Make sure outline buttons with custom text color influences the border color too */
.is-style-outline > .wp-block-button__link.has-text-color {
    border-color: currentColor;
}

/* Stack buttons on mobile */
@media (max-width: 782px) {
    .wp-block-buttons.is-style-stack {
        flex-direction: column;

        & > .wp-block-button,
        & > .wp-block-button > .wp-block-button__link {
            width: 100%;
        }
    }
}

/* Stack resized buttons in columns smaller than 700px */
@container (max-width:700px) {
    .wp-block-buttons:has(.wp-block-button[class*="wp-block-button__width-"][class*="is-style-"]) {
        gap: var(--wp--preset--spacing--20);
    }
    .wp-block-column .wp-block-buttons > .wp-block-button[class*="wp-block-button__width-"][class*="is-style-"] {
        width: 100%;
    }
}