/* BUTTON STYLES */

a:where(:not(.wp-element-button)) {
    text-underline-offset: 3px;
}

.wp-element-button.wp-block-button__link.wp-block-read-more {
    border: 1px solid var(--wp--preset--color--secondary);

    &:hover {
        background-color: var(--wp--preset--color--primary) !important;
        border: 1px solid var(--wp--preset--color--primary) !important;
        color: var(--wp--preset--color--white) !important;
    }
}

.wp-block-buttons {
    & .wp-block-button {

        /* Tab buttons */
        &.is-style-tab-buttons a.wp-block-button__link {
            padding: 0.65rem 1.5rem;
        }

        /* Icon Link & Colour Icon Link  */
        &.is-style-icon-link a.wp-block-button__link,
        &.is-style-colour-icon-link a.wp-block-button__link {
            background-color: transparent;
            border: 0;
        }

        /* Outline */
        &.is-style-outline a.wp-block-button__link {
            background-color: transparent;
            border: 1px solid var(--wp--preset--color--primary);
            color: var(--wp--preset--color--primary);

            &.has-primary-color {
                border: 1px solid var(--wp--preset--color--primary);

                &:hover {
                    background-color: var(--wp--preset--color--primary);
                    border: 1px solid var(--wp--preset--color--primary);
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-secondary-color {
                border: 1px solid var(--wp--preset--color--secondary);

                &:hover {
                    background-color: var(--wp--preset--color--secondary);
                    border: 1px solid var(--wp--preset--color--secondary);
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-snow-blue-ice-color {
                border: 1px solid var(--wp--preset--color--snow-blue-ice);

                &:hover {
                    background-color: var(--wp--preset--color--snow-blue-ice);
                    border: 1px solid var(--wp--preset--color--snow-blue-ice);
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-white-color {
                border: 1px solid var(--wp--preset--color--white);

                &:hover {
                    background-color: var(--wp--preset--color--transparent);
                    border: 1px solid var(--wp--preset--color--secondary) !important;
                    color: var(--wp--preset--color--secondary) !important;
                }
            }

            &:hover {
                background-color: var(--wp--preset--color--primary);
                border: 1px solid var(--wp--preset--color--primary);
                color: var(--wp--preset--color--white);
            }
        }

        /* Default buttons */
        & .wp-element-button.wp-block-button__link {
            border: inherit;

            &.has-base-background-color,
            &.has-sandy-background-color {
                border: 0;
                color: var(--wp--preset--color--primary);

                &:hover {
                    background-color: var(--wp--preset--color--secondary) !important;
                    border: 0;
                    color: var(--wp--preset--color--white);
                }
            }

            &.has-contrast-background-color {
                border: 0;
                color: var(--wp--preset--color--white);

                &:hover {
                    background-color: var(--wp--preset--color--neutral-900) !important;
                    border: 0;
                    color: var(--wp--preset--color--white);
                }
            }

            &.has-primary-background-color {
                border: 0;
                color: var(--wp--preset--color--white);

                &:hover {
                    background-color: var(--wp--preset--color--secondary) !important;
                    border: 0;
                }
            }

            &.has-secondary-background-color,
            &.has-secondary-2-background-color {
                border: 0;

                &:hover {
                    background-color: var(--wp--preset--color--primary) !important;
                    border: 0;
                    color: var(--wp--preset--color--white);
                }
            }

            &.has-snow-blue-ice-background-color {
                border: 0;

                &:hover {
                    background-color: var(--wp--preset--color--accent-2) !important;
                    border: 0;
                    color: var(--wp--preset--color--snow-blue-ice) !important;
                }
            }

            &.has-accent-background-color {
                border: 0;

                &:hover {
                    background-color: var(--wp--preset--color--snow-blue-ice) !important;
                    border: 0;
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-accent-2-background-color {
                border: 0;

                &:hover {
                    background-color: var(--wp--preset--color--snow-blue-ice) !important;
                    border: 0;
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-secondary-3-background-color {
                border: 0;
                color: var(--wp--preset--color--secondary);

                &:hover {
                    background-color: var(--wp--preset--color--secondary) !important;
                    border: 0;
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-secondary-4-background-color {
                border: 0;

                &:hover {
                    background-color: #c2979f !important;
                    border: 0;
                }
            }

            &.has-red-background-color {
                border: 0;

                &:hover {
                    background-color: #af311a !important;
                    border: 0;
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.has-snow-frost-background-color {
                border: 0;
                color: var(--wp--preset--color--snow-blue-ice);

                &:hover {
                    background-color: var(--wp--preset--color--accent-2) !important;
                    border: 0;
                }
            }

            &.has-white-background-color {
                border: 0;
                color: var(--wp--preset--color--neutral-900);

                &:hover {
                    background-color: var(--wp--preset--color--base) !important;
                    border: 0;
                }
            }

            &.has-neutral-900-background-color {
                border: 0;

                &:hover {
                    background-color: var(--wp--preset--color--black) !important;
                    border: 0;
                    color: var(--wp--preset--color--white) !important;
                }
            }

            &.wp-element-button--has-icon {
                align-items: center;
                background-color: initial;
                display: inline-flex;
                gap: 1em;
                justify-content: center;
            }
        }
    }
}