.wp-block-read-more {
    --button-background: var(--wp--preset--color--primary-orange-900);
    --button-color: var(--wp--preset--color--white);

    transition:
        background-color var(--transition--timing-200),
        border-color var(--transition--timing-200);

    &.is-style-brand-navy,
    &.is-style-brand-navy-full-width {
        --button-background: var(--wp--preset--color--primary-navy-900);

        &:hover {
            background-color: var(--wp--preset--color--primary-orange-900);
            border-color: var(--wp--preset--color--primary-orange-900);
        }
    }

    &.is-style-on-dark-background,
    &.is-style-on-dark-background-full-width {
        --button-background: var(--wp--preset--color--white);
        --button-color: var(--wp--preset--color--primary-navy-900);
    }

    &.is-style-brand-navy,
    &.is-style-on-dark-background,
    &.is-style-brand-navy-full-width,
    &.is-style-on-dark-background-full-width,
    &.is-style-brand-orange-outline {
        background-color: var(--button-background);
        padding-inline: var(--wp--preset--spacing--small);
        border: solid 1px var(--button-background);
        color: var(--button-color);
        align-content: center;
        text-align: center;
        border-radius: 8px;
        font-weight: 600;
        height: 48px;
    }

    &.is-style-brand-navy-full-width,
    &.is-style-on-dark-background-full-width {
        width: calc(100% - var(--wp--preset--spacing--small) * 2);
    }

    &.is-style-brand-orange-outline {
        background-color: transparent;
        border-color: var(--button-background);
        color: var(--wp--preset--color--primary-navy-900);

        &:hover {
            background-color: var(--wp--preset--color--primary-navy-900);
            border-color: var(--wp--preset--color--primary-navy-900);
            color: var(--button-color);
        }
    }
}