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

/* Global button */
.wp-block-button__link {
    display: flex;
    gap: 10px;
    align-items: center;
    transition: background 0.3s ease, color 0.3s ease;

    &:hover::after {
        transform: translateX(10px);
    }
}

/* Button icon */
.wp-block-button__link::after {
    content: "\e912";
    font-family: 'icomoon';
    font-size: var(--wp--preset--font-size--large);
    position: relative;
    top: -1px;
    transition: transform 0.3s ease;
}

/* Fill button */
.wp-block-button__link:hover {
    background: var(--wp--preset--color--contrast);
}

/* Subtle button */
.wp-block-button.is-style-subtle .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

/* Minimal button */
.wp-block-button.is-style-minimal .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
    padding: 0;
    &::after {
        background-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base);
        border-radius: 100%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &:hover {
        background-color: transparent !important;
        color: var(--wp--preset--color--primary) !important;
    }
}

.wp-block-button + .wp-block-button.is-style-minimal {
    padding-left: 16px;
}

.wp-block-button.is-style-minimal:has(+ .wp-block-button) {
    padding-right: 16px;
}

/* Custom width button */
.wp-block-button__width-100 .wp-block-button__link,
.wp-block-button__width-25 .wp-block-button__link,
.wp-block-button__width-50 .wp-block-button__link,
.wp-block-button__width-75 .wp-block-button__link {
    justify-content: center;
}

/* Exceptions for section styles */
.is-style-section-secondary .wp-block-button.is-style-subtle .wp-block-button__link {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
    &:hover {
        background: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base);
    }
}

.is-style-section-primary .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base)
}

.is-style-section-primary .wp-block-button.is-style-minimal .wp-block-button__link,
.is-style-section-contrast .wp-block-button.is-style-minimal .wp-block-button__link,
.is-style-section-quaternary .wp-block-button.is-style-minimal .wp-block-button__link {
    &::after {
        background-color: var(--wp--preset--color--base);
        color: var(--wp--preset--color--primary);
    }
    &,
    &:hover {
        color: inherit !important;
    }
}

.is-style-section-quaternary .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-section-contrast .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-section-primary .wp-block-button.is-style-outline .wp-block-button__link {
    color: inherit;
    border-color: currentColor;
}

.is-style-section-quaternary .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-section-contrast .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-section-primary .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: color-mix(in srgb, var(--wp--preset--color--base-variant) 10%, transparent);
}

.is-style-section-contrast .wp-block-button:not(.is-style-subtle):not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--primary)
}