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

.wp-block-button.is-style-none .wp-block-button__link {
    padding: 0;
    background-color: transparent;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-duration: .2s;
    position: relative;
    left: 0;
}

.is-vertical .wp-block-button.is-style-none .wp-block-button__link:hover {
    opacity: 0.8;
}

/* Add arrows to buttons */
.wp-block-button__link {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 0;
    strong {
        font-weight: inherit;
    }
}

.wp-block-button__link .wp-block-button__icon {
    transition: all 0.3s ease-in-out;
}

.wp-block-button:not(.is-style-register, .is-style-donate, .is-style-none) .wp-block-button__link:not(:has( .wp-block-button__icon )):after {
    content: "\e91c";
    font-family: "icomoon" !important;
    transition: all 0.3s ease-in-out;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 100;
    padding-left: 15px;
    margin-left: auto;
}

.wp-block-button.is-style-register .wp-block-button__link:not(:has( .wp-block-button__icon )):before,
.wp-block-button.is-style-donate .wp-block-button__link:not(:has( .wp-block-button__icon )):before {
    content: "";
    font-family: "icomoon" !important;
    transition: all 0.3s ease-in-out;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 100;
    padding-right: var(--wp--preset--spacing--20);
}

.wp-block-button.is-style-register .wp-block-button__link:not(:has( .wp-block-button__icon )):before {
    content: "\ea36";
}
.wp-block-button.is-style-donate .wp-block-button__link:not(:has( .wp-block-button__icon )):before {
    content: "\e9cd";
}

/* Make arrows move when hovering */
.wp-block-button__link:hover:after,
.wp-block-button__link:hover .wp-block-button__icon {
    transform: translateX(5px);
}

/* Add icons for button styles */
.is-style-accent > .wp-block-button__link,
.is-style-accent > .wp-block-button__link {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
}

.is-style-primary > .wp-block-button__link,
.is-style-primary > .wp-block-button__link {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

.is-style-primary-light > .wp-block-button__link,
.is-style-primary-light > .wp-block-button__link {
    background-color: var(--wp--preset--color--primary-light);
    color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-phone .wp-block-button__link:not(:has( .wp-block-button__icon )):after {
    content: "\e994";
    margin-left: auto;
}

.wp-block-button.is-style-download .wp-block-button__link:not(:has( .wp-block-button__icon )):after {
    content: "\e90b";
    margin-left: auto;
}

.wp-block-button.is-style-mail .wp-block-button__link:not(:has( .wp-block-button__icon )):after {
    content: "\e9ab";
    margin-left: auto;
}

/* Replace icon for read more button */
.wp-block-button.is-style-read-more .wp-block-button__link:not(:has( .wp-block-button__icon )) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    line-height: inherit;
    align-items: flex-start;
    text-align: left;
    border-radius: 0;
    &:after {
        padding: 0 15px 0 0;
    }
}

/* Set button text color based on background color */
.has-primary-light-background-color.wp-block-button__link,
.has-primary-background-color.wp-block-button__link,
.has-primary-dark-background-color.wp-block-button__link,
.has-accent-background-color.wp-block-button__link {
    color: var(--wp--preset--color--base);
}

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

[class*="is-style-section-primary"] .is-style-outline > .wp-block-button__link,
[class*="is-style-section-primary-dark"] .is-style-outline > .wp-block-button__link {
    border-color: var(--wp--preset--color--base-variant);
    color: var(--wp--preset--color--base);
}

[class*="is-style-section-primary"] .is-style-read-more .wp-block-button__link,
[class*="is-style-section-hero-alt"] .is-style-read-more .wp-block-button__link {
    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;
}

/* Add stretched links to buttons in grid items */
.is-layout-grid .wp-block-group .is-style-read-more a.wp-block-button__link::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

        > .wp-block-button:not(.is-style-read-more),
        > .wp-block-button > .wp-block-button__link:not(.is-style-read-more) {
            width: 100%;
        }
    }

    .wp-block-buttons:has(.is-style-read-more) {
        align-items: flex-start;
    }

    .is-style-section-hero-alt .wp-block-buttons > .wp-block-button:not(.is-style-read-more),
    .is-style-section-hero-alt .wp-block-buttons > .wp-block-button > .wp-block-button__link:not(.is-style-read-more) {
        width: auto;
    }
}

/* 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%;
    }
}

/* Header Buttons */
.wp-site-blocks > header.wp-block-template-part {
    .wp-block-buttons {
        gap: 0;
        align-items: stretch;
    }

    .wp-block-button {
        flex: 1;
        min-width: 230px;
        height: 52px;
        
        .wp-block-button__link {
            border-radius: 0;
            justify-content: center;
            white-space: nowrap;
            padding-top: var(--wp--preset--spacing--30);
            padding-bottom: var(--wp--preset--spacing--30);
            border: 0;
            background-color: var(--wp--preset--color--base);
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

            &:hover {
                background-color: var(--wp--preset--color--primary-light);
                color: var(--wp--preset--color--base);
            }
        }

        &.is-style-register .wp-block-button__link:not(:has( .wp-block-button__icon )):before {
            transition: none;
        }

        &.is-style-donate .wp-block-button__link {
            background-color: var(--wp--preset--color--accent);
            color: var(--wp--preset--color--base);
            border-color: var(--wp--preset--color--accent);
            transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;

            &:hover {
                background-color: var(--wp--preset--color--accent-variant);
                border-color: var(--wp--preset--color--accent-variant);
            }
        }

        &:first-child {
            .wp-block-button__link {
                border-top-left-radius: var(--wp--custom--global--border--radius--button);
                border-bottom-left-radius: var(--wp--custom--global--border--radius--button);

                &:not(:hover) {
                    background-color: var(--wp--preset--color--base-variant);
                }
            }
        }

        &:last-child {
            .wp-block-button__link {
                border-top-right-radius: var(--wp--custom--global--border--radius--button);
                border-bottom-right-radius: var(--wp--custom--global--border--radius--button);
            }
        }
    }

    @media screen and (max-width: 1195px) {
        .wp-block-buttons {
            margin-left: auto;
            max-width: 230px;
            flex-direction: column;
        }
        .wp-block-button {
            &:first-child {
                .wp-block-button__link {
                    border-top-left-radius: var(--wp--custom--global--border--radius--button);
                    border-top-right-radius: var(--wp--custom--global--border--radius--button);
                    border-bottom-left-radius: unset;
                }
            }

            &:last-child {
                .wp-block-button__link {
                    border-top-right-radius: unset;
                    border-bottom-right-radius: var(--wp--custom--global--border--radius--button);
                    border-bottom-left-radius: var(--wp--custom--global--border--radius--button);

                    .mobile-navigation & {
                        border-top-right-radius: var(--wp--custom--global--border--radius--button);
                    }
                }
            }
        }
    }
}