@supports selector(& .foo) {
  /*Admin styling*/
  .gin--edit-form {
    [data-type="layout_section"],
    .paragraph {
      background-color: var(--background-color, transparent);
      & :is(h1, h2, h3, h4, h5, h6, p) {
        color: var(--text-color);
      }
      &:has(> [data-background-color="primary"]) {
        --background-color: var(--primary-color, #00a94f);
        --text-color: var(--white, #fff);
      }
      &:has(> [data-background-color="secondary"]) {
        --background-color: var(--secondary-color, #00a94f);
        --text-color: var(--white, #fff);
      }
      &:has(> [data-background-color="tertiary"]) {
        --background-color: var(--tertiary-color, #00a94f);
        --text-color: var(--white, #fff);
      }
      &:has(> [data-background-color="accent"]) {
        --background-color: var(--accent-color, #00a94f);
        --text-color: var(--white, #fff);
      }

      &:has(> [data-background-color="gray"]) {
        --background-color: var(--gray-100, #f0f0f0);
        --text-color: #000;
      }
      &:has(> [data-background-color="charcoal"]) {
        --background-color: var(--boral-charcoal, #5a666f);
        --text-color: var(--white, #fff);
      }
      &:has(> [data-section-padding="nil"]) {
        --col-layout-padding-block: var(--size-0, 1rem);
        &[data-section-title="TRUE"] {
          --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-16, 1rem);
        }
      }
      &:has(> [data-section-padding="sm"]) {
        --col-layout-padding-block: var(--size-16, 1.5rem);
        &[data-section-title="TRUE"] {
          --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-16, 1.5rem);
        }
      }
      &:has(> [data-section-padding="md"]) {
        --col-layout-padding-block: var(--size-20, 2rem);
        &[data-section-title="TRUE"] {
          --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-20, 2rem);
        }
      }
      &:has(> [data-section-padding="lg"]) {
        --col-layout-padding-block: var(--size-22, 4rem);
        &[data-section-title="TRUE"] {
          --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-22, 4rem);
        }
      }
      &:has(> [data-section-padding="xl"]) {
        --col-layout-padding-block: var(--size-25, 5rem);
        &[data-section-title="TRUE"] {
          --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-25, 5rem);
        }
      }
    }
  }
  .paragraph {
    &.paragraph--type--layout-section {
      padding-block: var(--col-layout-padding-block);
      .paragraph {
        padding-block: 0;
      }
    }
    &:has(> [data-section-padding="nil"]) {
      --col-layout-padding-block: var(--size-4, 1rem);
    }
    &:has(> [data-section-padding="sm"]) {
      --col-layout-padding-block: var(--size-5, 1.5rem);
    }
    &:has(> [data-section-padding="md"]) {
      --col-layout-padding-block: var(--size-8, 2rem);
    }
    &:has(> [data-section-padding="lg"]) {
      --col-layout-padding-block: var(--size-16, 4rem);
    }
    &:has(> [data-section-padding="xl"]) {
      --col-layout-padding-block: var(--size-20, 5rem);
    }
  }
  .column-layout {
    display: flex;
    flex-wrap: wrap;

    column-gap: var(--col-layout-col-gap);
    row-gap: var(--col-layout-row-gap);
    &[data-col-gap="sm"] {
      --col-layout-col-gap: var(--size-4, 1rem);
    }
    &[data-col-gap="md"] {
      --col-layout-col-gap: var(--size-6, 1.5rem);
    }
    &[data-col-gap="lg"] {
      --col-layout-col-gap: var(--size-12, 3rem);
    }
    &[data-row-gap="sm"] {
      --col-layout-row-gap: var(--size-4, 1rem);
    }
    &[data-row-gap="md"] {
      --col-layout-row-gap: var(--size-6, 1.5rem);
    }
    &[data-row-gap="lg"] {
      --col-layout-row-gap: var(--size-12, 3rem);
    }
    &[data-horizontal-alignment="start"] {
      align-items: flex-start;
    }
    &[data-horizontal-alignment="center"] {
      align-items: center;
    }
    &[data-horizontal-alignment="end"] {
      align-items: flex-end;
    }

    .col {
      display: flex;
      flex-direction: column;
      column-gap: var(--col-layout-col-gap);
      row-gap: var(--col-layout-row-gap);
    }
  }
}

@supports not selector(& .foo) {
  /*Admin styling*/
  .gin--edit-form [data-type="layout_section"],
  .gin--edit-form .paragraph {
    background-color: var(--background-color, transparent);
  }
  .gin--edit-form [data-type="layout_section"]:is(h1, h2, h3, h4, h5, h6, p),
  .gin--edit-form .paragraph:is(h1, h2, h3, h4, h5, h6, p) {
    color: var(--text-color);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-background-color="primary"]),
  .gin--edit-form .paragraph:has(> [data-background-color="primary"]) {
    --background-color: var(--primary-color, #00a94f);
    --text-color: var(--white, #fff);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-background-color="secondary"]),
  .gin--edit-form .paragraph:has(> [data-background-color="secondary"]) {
    --background-color: var(--secondary-color, #00a94f);
    --text-color: var(--white, #fff);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-background-color="tertiary"]),
  .gin--edit-form .paragraph:has(> [data-background-color="tertiary"]) {
    --background-color: var(--tertiary-color, #00a94f);
    --text-color: var(--white, #fff);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-background-color="accent"]),
  .gin--edit-form .paragraph:has(> [data-background-color="accent"]) {
    --background-color: var(--accent-color, #00a94f);
    --text-color: var(--white, #fff);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-background-color="gray"]),
  .gin--edit-form .paragraph:has(> [data-background-color="gray"]) {
    --background-color: var(--gray-100, #f0f0f0);
    --text-color: #000;
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-background-color="charcoal"]),
  .gin--edit-form .paragraph:has(> [data-background-color="charcoal"]) {
    --background-color: var(--boral-charcoal, #5a666f);
    --text-color: var(--white, #fff);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="nil"]),
  .gin--edit-form .paragraph:has(> [data-section-padding="nil"]) {
    --col-layout-padding-block: var(--size-0, 1rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="nil"])[data-section-title="TRUE"],
  .gin--edit-form .paragraph:has(> [data-section-padding="nil"])[data-section-title="TRUE"] {
    --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-16, 1rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="sm"]),
  .gin--edit-form .paragraph:has(> [data-section-padding="sm"]) {
    --col-layout-padding-block: var(--size-16, 1.5rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="sm"])[data-section-title="TRUE"],
  .gin--edit-form .paragraph:has(> [data-section-padding="sm"])[data-section-title="TRUE"] {
    --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-16, 1.5rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="md"]),
  .gin--edit-form .paragraph:has(> [data-section-padding="md"]) {
    --col-layout-padding-block: var(--size-20, 2rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="md"])[data-section-title="TRUE"],
  .gin--edit-form .paragraph:has(> [data-section-padding="md"])[data-section-title="TRUE"] {
    --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-20, 2rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="lg"]),
  .gin--edit-form .paragraph:has(> [data-section-padding="lg"]) {
    --col-layout-padding-block: var(--size-22, 4rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="lg"])[data-section-title="TRUE"],
  .gin--edit-form .paragraph:has(> [data-section-padding="lg"])[data-section-title="TRUE"] {
    --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-22, 4rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="xl"]),
  .gin--edit-form .paragraph:has(> [data-section-padding="xl"]) {
    --col-layout-padding-block: var(--size-25, 5rem);
  }
  .gin--edit-form [data-type="layout_section"]:has(> [data-section-padding="xl"])[data-section-title="TRUE"],
  .gin--edit-form .paragraph:has(> [data-section-padding="xl"])[data-section-title="TRUE"] {
    --col-layout-padding-block: var(--size-10, 2.5rem) var(--size-25, 5rem);
  }
  .paragraph.paragraph--type--layout-section {
    padding-block: var(--col-layout-padding-block);
  }
  .paragraph.paragraph--type--layout-section .paragraph {
    padding-block: 0;
  }
  .paragraph:has(> [data-section-padding="nil"]) {
    --col-layout-padding-block: var(--size-4, 1rem);
  }
  .paragraph:has(> [data-section-padding="sm"]) {
    --col-layout-padding-block: var(--size-5, 1.5rem);
  }
  .paragraph:has(> [data-section-padding="md"]) {
    --col-layout-padding-block: var(--size-8, 2rem);
  }
  .paragraph:has(> [data-section-padding="lg"]) {
    --col-layout-padding-block: var(--size-16, 4rem);
  }
  .paragraph:has(> [data-section-padding="xl"]) {
    --col-layout-padding-block: var(--size-20, 5rem);
  }
  .column-layout {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--col-layout-col-gap);
    row-gap: var(--col-layout-row-gap);
  }
  .column-layout[data-col-gap="sm"] {
    --col-layout-col-gap: var(--size-4, 1rem);
  }
  .column-layout[data-col-gap="md"] {
    --col-layout-col-gap: var(--size-6, 1.5rem);
  }
  .column-layout[data-col-gap="lg"] {
    --col-layout-col-gap: var(--size-12, 3rem);
  }
  .column-layout[data-row-gap="sm"] {
    --col-layout-row-gap: var(--size-4, 1rem);
  }
  .column-layout[data-row-gap="md"] {
    --col-layout-row-gap: var(--size-6, 1.5rem);
  }
  .column-layout[data-row-gap="lg"] {
    --col-layout-row-gap: var(--size-12, 3rem);
  }
  .column-layout[data-horizontal-alignment="start"] {
    align-items: flex-start;
  }
  .column-layout[data-horizontal-alignment="center"] {
    align-items: center;
  }
  .column-layout[data-horizontal-alignment="end"] {
    align-items: flex-end;
  }
  .column-layout .col {
    display: flex;
    flex-direction: column;
    column-gap: var(--col-layout-col-gap);
    row-gap: var(--col-layout-row-gap);
  }
}