/* ------------------------------ */
/* Style Variants - Textures:
/*      - Node
/*      - Beacon Single
/*      - Circles
/*      - Radiating
/*      - Beacon Pattern
/* ------------------------------ */

/* All "connecting" textures: create a pseudo element
/* for the texture, so it can be rotated and scaled.
/*
/* The following textures "connect:"
/*      - Node
/*      - Beacon Single
/*      - Circles
/*      - Radiating
/*
/* We use attribute selectors here to capture both the
/* default and 'invert' versions of each texture.
/* ------------------------------ */
[class*=is-style-roar__texture-node],
[class*=is-style-roar__texture-beacon-single],
[class*=is-style-roar__texture-circles],
[class*=is-style-roar__texture-radiating] {
    /* Keep content above texture */
    & > * {
        position: relative;
        z-index: 2;
    }

    &::after,
    &[class*=is-style-roar__texture-circles]::before {
        /* Why use all these !importants??
        /* To override WP's use of the :after pseudo element in the block editor.
        /* Without overriding, the textures "jump" when editors mouse over the groups.
        /* See https://github.com/wordpress/gutenberg/issues/73754
        /* Note that while that issue is marked "closed," the issue persists.
        /* Should WP's outline implementation change in the future, we can remove the !importants. */
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top right;
        position: absolute;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        bottom: auto !important;
        z-index: 1;
    }

    &[class*=invert]::after {
        transform: rotate(180deg) scaleX(-1);
        top: auto !important;
        bottom: 0 !important;
    }
}


/* Connecting Texture 1: Node
/* Standalone texture of a mesh network of nodes.
/* ------------------------------ */
[class*=is-style-roar__texture-node]::after {
    background-image: url(/wp-content/themes/roar/assets/images/texture-node-purple-large.svg);
    width: 25vw;
    height: 25vw;
}
/* Discourage the texture from impeding content at all screens sizes */
@media only screen and (max-width: 1100px) {
    [class*=is-style-roar__texture-node]::after {
        width: 30vw;
        height: 30vw;
    }
}
@media only screen and (max-width: 781px) {
    [class*=is-style-roar__texture-node]::after {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-purple-small.svg);
        }
}
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-node]::after {
        width: 40vw;
        height: 40vw;
    }
}


/* Connecting Texture 2: Beacon Single
/* Standalone large beacon icon.
/* ------------------------------ */
[class*=is-style-roar__texture-beacon-single]::after {
    background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-purple.svg);
    width: 28rem;
    height: 28rem;
}
/* Discourage the texture from impeding content at all screens sizes.
/* We scale using a precise size here instead of vw to ensure the
/* edges of the illustration always meet with no rounding gaps
/* when combining the "invert" modes. */
@media only screen and (max-width: 1100px) {
    [class*=is-style-roar__texture-beacon-single]::after {
        width: 20rem;
        height: 20rem;
    }
}
@media only screen and (max-width: 781px) {
    [class*=is-style-roar__texture-beacon-single]::after {
        width: 12rem;
        height: 12rem;
    }
}
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-beacon-single]::after {
        width: 8rem;
        height: 8rem;
    }
}

/* Connecting Texture 3: Circles
/* Standalone concentric circles in opposite corners of group.
/* ------------------------------ */
[class*=is-style-roar__texture-circles]::after,
[class*=is-style-roar__texture-circles]::before {
    background-image: url(/wp-content/themes/roar/assets/images/texture-circles-purple.svg);
    width: 20vw;
    height: 20vw;
}
/* Since circles has TWO textures (one in each corner),
/* we leverage both pseudo elements. Duplicate selectors here
/* allow us to keep things organized in the scaffold above.  */
[class*=is-style-roar__texture-circles][class*=is-style-roar__texture-circles] {
    &::before {
        /* See the connecting pattern scaffold above
        /* for an explanation of all these gross !important declarations. */
        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: rotate(180deg);
    }
    &[class*=invert]::before {
        top: 0 !important;
        bottom: auto !important;
        transform: rotate(270deg);
    }
}
/* Keep definition in the texture on small screens */
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-circles]::after,
    [class*=is-style-roar__texture-circles]::before {
        width: 30vw;
        height: 30vw;
    }
}

/* Connecting Texture 4: Radiating */
/* Single wave radiating icon.
/* ------------------------------ */
[class*=is-style-roar__texture-radiating]::after {
    background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-purple.svg);
    width: 20vw;
    height: 20vw;
}
/* Keep definition in the texture on small screens */
@media only screen and (max-width: 500px) {
    [class*=is-style-roar__texture-radiating]::after {
        width: 30vw;
        height: 30vw;
    }
}


/* Beacon PATTERN Texture
/* NOT an invertable/connecting texture.
/* A repeating beacon graphic on the group's left side
/* ------------------------------ */
.is-style-roar__texture-beacon-pattern {
    background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-purple.svg);
    background-repeat: repeat-y;
    background-position: top left;
}
@media only screen and (max-width: 860px) {
    .is-style-roar__texture-beacon-pattern {
        background-size: 0.75rem;
    }
}


/* ------------------------------------------------------------- */
/* End of Group Texture Styles



/* ------------------------------ */
/* Style Variant: Logo Grid
/* ------------------------------ */

.is-style-roar__logo-grid {
    align-items: center;
}

.is-style-roar__logo-grid figure {
    text-align: center;
}

@media only screen and (max-width: 781px) {
    .is-style-roar__logo-grid {
        /* Always go to two columns on small screens, regardless of editor settings */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ------------------------------ */
/* Style Variant: Highlight
/* ------------------------------ */
.is-style-roar__group-highlight {
    background-color: var(--wp--preset--color--cobalt-50);
    padding: var(--wp--custom--highlight--padding);
    border-radius: var(--wp--custom--highlight--border-radius);
}


/* ------------------------------ */
/* Hero Patterns
/* ------------------------------ */

/* Full Width Hero: 1 column with headline, text, and image */
.roar__hero-full-width {
    background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-full-width.svg), var(--wp--preset--gradient--roar-purple-to-white);
    background-position: top left;
    background-repeat: no-repeat;
}

/* Two Column Simple Hero: 2 col text + image, simpler than the other 2-col hero */
.roar__hero-two-column-simple {
    background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-two-column-simple.svg), var(--wp--preset--gradient--roar-purple-to-white);
    background-position: top left;
    background-repeat: no-repeat;
    overflow-x: hidden;

    .wp-block-column:first-child {
        padding-top: var(--wp--preset--spacing--seven-x-large);
        padding-bottom: var(--wp--preset--spacing--seven-x-large);
    }
}

/* Two Column Complex Hero: like the simple version,
/* but with a fancier image treatment
/* and support for additional child rows. */
.roar__hero-two-column-complex {
    background-image: var(--wp--preset--gradient--roar-purple-to-white);
    background-repeat: no-repeat;
    overflow: hidden;
    
    /* Specifically select only the first "row," since this hero
    /* needs to support additional rows below the first,
    /* allowing the node pattern treatment to flow across content. */
    & > .wp-block-columns:first-child {
        .wp-block-column:first-child {
            padding-top: var(--wp--preset--spacing--nine-x-large);
            padding-bottom: var(--wp--preset--spacing--nine-x-large);
        }
        .wp-block-column:last-child {
            position: relative;
            & > * {
                z-index: 1;
            }
            &::after {
                content: '';
                position: absolute;
                bottom: -25rem;
                /* This `right` value is manipulated along with the image-bleed effect below. */
                right: 0;
                z-index: 2;
                width: 110vw;
                height: 40rem;
                background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-two-column-complex.svg);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: top right;
            }
        }
    }
}
/* Adjust position & scale of the layered node treatment,
/* Until it disappears entirely on small screens. */
@media only screen and (max-width: 1500px) {
    .roar__hero-two-column-complex > .wp-block-columns:first-child .wp-block-column:last-child::after {
        height: 35rem;
    }
}
@media only screen and (max-width: 1000px) {
    .roar__hero-two-column-complex>.wp-block-columns:first-child .wp-block-column:last-child::after {
        width: 120vw;
        bottom: -33rem;
        right: -25rem;
    }
}
@media only screen and (max-width: 781px) {
.roar__hero-two-column-complex>.wp-block-columns:first-child .wp-block-column:last-child::after {
        display: none;
    }
}

/* In both hero column versions, the image in col 2 bleeds off the right edge.
/* We attach the image to edge of page on all screen sizes above the stackpoint. */
@media screen and (min-width: 782px) and (max-width: 1600px) {
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        .roar__hero-image,
        & > .wp-block-columns:first-child .wp-block-column:last-child::after {
            margin-right: calc(var(--wp--style--root--padding-right) * -1);
        }
    }
}
@media only screen and (min-width: 1000px) {
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        .roar__hero-image,
        & > .wp-block-columns:first-child .wp-block-column:last-child::after {
            margin-right: -20vw;
        }
    }
}

/* When layout stacks and image no longer bleeds off the right edge,
/* All corners should be rounded. */
@media only screen and (max-width: 781px) {
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        .roar__hero-image img {
            border-radius: var(--wp--preset--border-radius--medium);
        }
    }
}

/* All three hero patterns share the same mobile treatment for background textures */
@media only screen and (max-width: 781px) {
    .roar__hero-full-width,
    .roar__hero-two-column-simple,
    .roar__hero-two-column-complex {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-hero-full-width-top-mobile.svg), var(--wp--preset--gradient--roar-purple-to-white);
        background-position: top center;
        background-size: contain;
    }
}


/* ------------------------------------------------ */
/* Section Styling / Color Theming
/* Modify children when parent group gets a bg color
/* ------------------------------------------------ */

/* On-dark behavior: automatically swap to light text */
.has-roar-purple-950-background-color,
.has-roar-purple-900-background-color,
.has-roar-purple-800-background-color,
.has-roar-purple-700-background-color,
.has-roar-purple-600-background-color,
.has-roar-purple-500-background-color,
.has-cobalt-950-background-color,
.has-cobalt-900-background-color,
.has-cobalt-800-background-color,
.has-cobalt-700-background-color,
.has-cobalt-600-background-color,
.has-cobalt-500-background-color,
.has-mint-950-background-color,
.has-mint-900-background-color,
.has-mint-800-background-color,
.has-mint-700-background-color,
.has-mint-600-background-color,
.has-chartreuse-950-background-color,
.has-chartreuse-900-background-color,
.has-chartreuse-800-background-color,
.has-chartreuse-700-background-color,
.has-sand-950-background-color,
.has-sand-900-background-color,
.has-sand-800-background-color,
.has-sand-700-background-color,
.has-sand-600-background-color,
.has-stone-950-background-color,
.has-stone-900-background-color,
.has-stone-800-background-color,
.has-stone-700-background-color,
.has-stone-600-background-color,
.has-lavender-950-background-color,
.has-lavender-900-background-color,
.has-lavender-800-background-color,
.has-lavender-700-background-color,
.has-lavender-600-background-color,
.has-lavender-500-background-color,
.has-neutral-950-background-color,
.has-neutral-900-background-color,
.has-neutral-800-background-color,
.has-neutral-700-background-color,
.has-neutral-600-background-color,
.has-neutral-500-background-color {
    color: var(--wp--preset--color--neutral-white);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--wp--preset--color--neutral-white);
    }
}

/* Roar Purple */
/* ------------------------------ */
.has-background[class*=has-roar-purple] {
    /* Add styles here for all purple BGs.
    /* They currently use the default purple texture files, hence this blank section. */
}
/* Roar Purple Lights */
.has-roar-purple-50-background-color,
.has-roar-purple-100-background-color,
.has-roar-purple-200-background-color,
.has-roar-purple-300-background-color,
.has-roar-purple-400-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-roar-purple-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-roar-purple-light--feature-list-headline);
        }
    }
}
/* Roar Purple Darks */
.has-roar-purple-500-background-color,
.has-roar-purple-600-background-color,
.has-roar-purple-700-background-color,
.has-roar-purple-800-background-color,
.has-roar-purple-900-background-color,
.has-roar-purple-950-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-roar-purple-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-roar-purple-dark--feature-list-headline);
        }
    }
}


/* Cobalt */
/* ------------------------------ */
.has-background[class*=has-cobalt] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-cobalt-large.svg);
        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-cobalt-small.svg);
        }
    }
    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-cobalt.svg);
    }
    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-cobalt.svg);
    }
    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-cobalt.svg);
    }
    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-cobalt.svg);
    }
}
/* Cobalt Lights */
.has-cobalt-50-background-color,
.has-cobalt-100-background-color,
.has-cobalt-200-background-color,
.has-cobalt-300-background-color,
.has-cobalt-400-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-cobalt-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-cobalt-light--feature-list-headline);
        }
    }
}
/* Cobalt Darks */
.has-cobalt-500-background-color,
.has-cobalt-600-background-color,
.has-cobalt-700-background-color,
.has-cobalt-800-background-color,
.has-cobalt-900-background-color,
.has-cobalt-950-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-cobalt-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-cobalt-dark--feature-list-headline);
        }
    }
}

/* Mint */
/* ------------------------------ */
.has-background[class*=has-mint] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-mint-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-mint-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-mint.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-mint.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-mint.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-mint.svg);
    }
}
/* Mint Lights */
.has-mint-50-background-color,
.has-mint-100-background-color,
.has-mint-200-background-color,
.has-mint-300-background-color,
.has-mint-400-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-mint-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-mint-light--feature-list-headline);
        }
    }
}
/* Mint Darks */
.has-mint-500-background-color,
.has-mint-600-background-color,
.has-mint-700-background-color,
.has-mint-800-background-color,
.has-mint-900-background-color,
.has-mint-950-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-mint-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-mint-dark--feature-list-headline);
        }
    }
}

/* Chartreuse */
/* ------------------------------ */
.has-background[class*=has-chartreuse] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-mint-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-mint-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-mint.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-mint.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-mint.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-mint.svg);
    }
}
/* Chartreuse Lights */
.has-chartreuse-50-background-color,
.has-chartreuse-100-background-color,
.has-chartreuse-200-background-color,
.has-chartreuse-300-background-color,
.has-chartreuse-400-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-chartreuse-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-chartreuse-light--feature-list-headline);
        }
    }
}
/* Chartreuse Darks */
.has-chartreuse-500-background-color,
.has-chartreuse-600-background-color,
.has-chartreuse-700-background-color,
.has-chartreuse-800-background-color,
.has-chartreuse-900-background-color,
.has-chartreuse-950-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-chartreuse-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-chartreuse-dark--feature-list-headline);
        }
    }
}

/* Sand */
/* ------------------------------ */
.has-background[class*=has-sand] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-light-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-light-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-neutral-light.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-neutral-light.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-neutral-light.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-neutral-light.svg);
    }
}
/* Sand Lights */
.has-sand-50-background-color,
.has-sand-100-background-color,
.has-sand-200-background-color,
.has-sand-300-background-color,
.has-sand-400-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-sand-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-sand-light--feature-list-headline);
        }
    }
}
/* Sand Darks */
.has-sand-500-background-color,
.has-sand-600-background-color,
.has-sand-700-background-color,
.has-sand-800-background-color,
.has-sand-900-background-color,
.has-sand-950-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-sand-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-sand-dark--feature-list-headline);
        }
    }
}

/* Lavender */
/* ------------------------------ */
.has-background[class*=has-lavender] {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-purple-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-purple-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-lavender.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-lavender.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-lavender.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-lavender.svg);
    }
}
/* Lavender Lights */
.has-lavender-50-background-color,
.has-lavender-100-background-color,
.has-lavender-200-background-color,
.has-lavender-300-background-color,
.has-lavender-400-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-lavender-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-lavender-light--feature-list-headline);
        }
    }
}
/* Lavender Darks */
.has-lavender-500-background-color,
.has-lavender-600-background-color,
.has-lavender-700-background-color,
.has-lavender-800-background-color,
.has-lavender-900-background-color,
.has-lavender-950-background-color {
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-lavender-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-lavender-dark--feature-list-headline);
        }
    }
}

/* Neutral Light Backgrounds */
/* ------------------------------ */
.has-neutral-50-background-color,
.has-neutral-100-background-color,
.has-neutral-200-background-color,
.has-neutral-300-background-color {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-dark-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-dark-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-neutral-dark.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-neutral-dark.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-neutral-dark.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-neutral-dark.svg);
    }
    /* End Neutral Light Textures */
    /* Begin theming of child elements */
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-neutral-light--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-neutral-light--feature-list-headline);
        }
    }
}

/* Neutral Dark Backgrounds */
/* ------------------------------ */
.has-neutral-400-background-color,
.has-neutral-500-background-color,
.has-neutral-600-background-color,
.has-neutral-700-background-color,
.has-neutral-800-background-color,
.has-neutral-900-background-color,
.has-neutral-950-background-color {
    &.is-style-roar__texture-node::after,
    &.is-style-roar__texture-node-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-light-large.svg);

        @media only screen and (max-width: 781px) {
            background-image: url(/wp-content/themes/roar/assets/images/texture-node-neutral-light-small.svg);
        }
    }

    &.is-style-roar__texture-beacon-single::after,
    &.is-style-roar__texture-beacon-single-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-single-neutral-light.svg);
    }

    &.is-style-roar__texture-circles::after,
    &.is-style-roar__texture-circles-invert::after,
    &.is-style-roar__texture-circles::before,
    &.is-style-roar__texture-circles-invert::before {
        background-image: url(/wp-content/themes/roar/assets/images/texture-circles-neutral-light.svg);
    }

    &.is-style-roar__texture-radiating::after,
    &.is-style-roar__texture-radiating-invert::after {
        background-image: url(/wp-content/themes/roar/assets/images/texture-radiating-neutral-light.svg);
    }

    &.is-style-roar__texture-beacon-pattern {
        background-image: url(/wp-content/themes/roar/assets/images/texture-beacon-pattern-neutral-light.svg);
    }
    /* End Neutral Dark Textures */
    /* Begin theming of child elements */
    & .wp-block-outermost-icon-block .icon-container svg {
        fill: var(--wp--custom--color-theming--on-neutral-dark--icon);
    }
    &.roar__feature-list,
    & .roar__feature-list {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--wp--custom--color-theming--on-neutral-dark--feature-list-headline);
        }
    }
}