@layer bricks {
  /* ========================================
     THEME MODES - Base styles
     ======================================== */

  :is(.brxe-section, .color-theme)[data-theme-mode="light"] {
    background-color: var(--color-base-l-3);
    --section-heading-color: var(--color-base-d-3);
    --section-text-color: var(--color-base-d-2);

    /* -- inner element tokens -- */
    --section-bg: var(--color-base-l-3);
    --section-title-color: var(--color-brand-primary);
    --section-highlight-color: var(--color-brand-primary);
    --section-card-bg: var(--color-base-l-4);
    --section-card-border: var(--color-base-l-2);
    --card-icon-fill: var(--color-brand-primary);
    --btn-bg: var(--color-brand-primary);
    --btn-hover: var(--color-brand-primary-d-1);
    --btn-text: var(--color-base-l-4);
    --divider: var(--color-base-d-4);
    --slider-nav-bg: var(--color-base-d-3);
    --slider-nav-arrow-color: var(--color-base-l-3);
    --slider-pagination-bg: var(--color-base-l-1);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--color-base-l-1);
    --btn-outline-text: var(--color-base-d-3);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="mid"] {
    background-color: var(--color-base-l-2);
    --section-heading-color: var(--color-base-d-3);
    --section-text-color: var(--color-base-d-2);

    /* -- inner element tokens -- */
    --section-bg: var(--color-base-l-2);
    --section-title-color: #cf2a00;
    --section-card-border: var(--color-base-l-2);
    --card-icon-fill: var(--color-brand-primary);
    --btn-bg: var(--color-brand-primary);
    --btn-hover: var(--color-brand-primary-d-1);
    --btn-text: var(--color-base-l-4);
    --divider: var(--color-base-d-4);
    --slider-nav-bg: var(--color-base-l-3);
    --slider-nav-arrow-color: var(--color-base-d-3);
    --slider-pagination-bg: var(--color-base);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--color-base-l-1);
    --btn-outline-text: var(--color-base-d-3);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"] {
    background-color: var(--color-base-d-3);
    --section-heading-color: var(--color-base-l-3);
    --section-text-color: var(--color-base-l-2);

    /* -- inner element tokens -- */
    --section-bg: var(--color-base-d-3);
    --section-title-color: #f63100;
    --section-highlight-color: var(--color-brand-primary-l-2);
    --section-card-bg: var(--color-base-d-2);
    --section-card-border: var(--color-base-d-4);
    --card-icon-fill: var(--color-brand-primary-l-2);
    --btn-bg: var(--color-brand-primary);
    --btn-hover: var(--color-brand-primary-d-1);
    --btn-text: var(--color-base-l-4);
    --divider: var(--color-base-l-4);
    --slider-nav-bg: var(--color-base-l-3);
    --slider-nav-arrow-color: var(--color-base-d-3);
    --slider-pagination-bg: var(--color-base-d-1);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--color-base-d-4);
    --btn-outline-text: var(--color-base-l-3);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="primary"] {
    background-color: var(--color-brand-primary);
    --section-heading-color: var(--color-base-l-3);
    --section-text-color: var(--color-base-l-3);

    /* -- inner element tokens -- */
    --section-bg: var(--color-brand-primary);
    --section-title-color: var(--color-base-l-4);
    --section-highlight-color: var(--color-brand-primary-l-3);
    --section-card-bg: var(--color-brand-primary-d-4);
    --section-card-border: var(--color-brand-primary-d-3);
    --card-icon-fill: var(--color-brand-primary-l-2);
    --btn-bg: var(--color-base-l-4);
    --btn-hover: var(--color-base-l-3);
    --btn-text: var(--color-base-d-4);
    --divider: var(--color-base-l-4);
    --slider-nav-bg: var(--color-base-l-4);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-brand-primary-d-3);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--section-heading-color);
    --btn-outline-text: var(--section-text-color);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="secondary"] {
    background-color: var(--color-brand-secondary);
    --section-heading-color: var(--color-base-d-3);
    --section-text-color: var(--color-base-d-3);

    /* -- inner element tokens -- */
    --section-bg: var(--color-brand-secondary);
    --section-title-color: var(--color-base-d-3);
    --section-highlight-color: var(--color-brand-secondary-d-2);
    --section-card-bg: var(--color-base-l-4);
    --section-card-border: var(--color-base-l-2);
    --card-icon-fill: var(--color-brand-secondary);
    --btn-bg: var(--color-brand-secondary);
    --btn-hover: var(--color-brand-secondary-d-2);
    --btn-text: var(--color-base-l-4);
    --divider: var(--color-base-d-4);
    --slider-nav-bg: var(--color-base-l-3);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-base-l-3);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--section-heading-color);
    --btn-outline-text: var(--section-text-color);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="tertiary"] {
    background-color: var(--color-brand-tertiary);
    --section-heading-color: var(--color-base-d-3);
    --section-text-color: var(--color-base-d-3);

    /* -- inner element tokens -- */
    --section-bg: var(--color-brand-tertiary);
    --section-title-color: var(--color-base-d-3);
    --section-highlight-color: var(--color-brand-tertiary-d-2);
    --section-card-bg: var(--color-base-l-4);
    --section-card-border: var(--color-base-l-2);
    --card-icon-fill: var(--color-brand-tertiary);
    --btn-bg: var(--color-brand-tertiary);
    --btn-hover: var(--color-brand-tertiary-d-2);
    --btn-text: var(--color-base-l-4);
    --divider: var(--color-base-d-4);
    --slider-nav-bg: var(--color-base-l-3);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-base-l-3);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--section-heading-color);
    --btn-outline-text: var(--section-text-color);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="accent"] {
    background-color: var(--color-brand-accent);
    --section-heading-color: var(--color-base-d-3);
    --section-text-color: var(--color-base-d-3);

    /* -- inner element tokens -- */
    --section-bg: var(--color-brand-accent);
    --section-title-color: var(--color-base-d-3);
    --section-highlight-color: var(--color-brand-accent);
    --section-card-bg: var(--color-base-l-4);
    --section-card-border: var(--color-base-l-2);
    --card-icon-fill: var(--color-brand-accent);
    --btn-bg: var(--color-brand-accent);
    --btn-hover: var(--color-brand-accent);
    --btn-text: var(--color-base-l-4);
    --divider: var(--color-base-d-4);
    --slider-nav-bg: var(--color-base-l-3);
    --slider-nav-arrow-color: var(--color-base-d-4);
    --slider-pagination-bg: var(--color-base-l-3);

    /* -- btn outline tokens -- */
    --btn-outline-border: var(--section-heading-color);
    --btn-outline-text: var(--section-text-color);
  }

  .slider-pagination__track[data-theme-mode="dark"] {
    background: white !important;
  }

  .slider-pagination__track[data-theme-mode="light"] {
    background: black !important;
  }

  /* ========================================
     ACCENT COLORS - Primary
     ======================================== */

  :is(.brxe-section, .color-theme)[data-theme-mode="light"][data-accent-color="primary"] {
    --active-accent: var(--color-brand-primary);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="mid"][data-accent-color="primary"] {
    --active-accent: var(--color-brand-primary);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"][data-accent-color="primary"] {
    --active-accent: var(--color-brand-primary-l-1);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="primary"][data-accent-color="primary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="secondary"][data-accent-color="primary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="tertiary"][data-accent-color="primary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="accent"][data-accent-color="primary"] {
    --active-accent: var(--color-base-d-3);
  }

  /* ========================================
     ACCENT COLORS - Secondary
     ======================================== */

  :is(.brxe-section, .color-theme)[data-theme-mode="light"][data-accent-color="secondary"] {
    --active-accent: var(--color-brand-secondary-d-2);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="mid"][data-accent-color="secondary"] {
    --active-accent: var(--color-brand-secondary-d-2);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"][data-accent-color="secondary"] {
    --active-accent: var(--color-brand-secondary);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="primary"][data-accent-color="secondary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="secondary"][data-accent-color="secondary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="tertiary"][data-accent-color="secondary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="accent"][data-accent-color="secondary"] {
    --active-accent: var(--color-base-d-3);
  }

  /* ========================================
     ACCENT COLORS - Tertiary
     ======================================== */

  :is(.brxe-section, .color-theme)[data-theme-mode="light"][data-accent-color="tertiary"] {
    --active-accent: var(--color-brand-tertiary-d-2);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="mid"][data-accent-color="tertiary"] {
    --active-accent: var(--color-brand-tertiary-d-2);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"][data-accent-color="tertiary"] {
    --active-accent: var(--color-brand-tertiary);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="primary"][data-accent-color="tertiary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="secondary"][data-accent-color="tertiary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="tertiary"][data-accent-color="tertiary"],
  :is(.brxe-section, .color-theme)[data-theme-mode="accent"][data-accent-color="tertiary"] {
    --active-accent: var(--color-base-d-3);
  }

  /* ========================================
     ACCENT COLORS - Accent
     ======================================== */

  :is(.brxe-section, .color-theme)[data-theme-mode="light"][data-accent-color="accent"] {
    --active-accent: var(--color-brand-accent);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="mid"][data-accent-color="accent"] {
    --active-accent: var(--color-brand-accent);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"][data-accent-color="accent"] {
    --active-accent: var(--color-brand-accent);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="primary"][data-accent-color="accent"],
  :is(.brxe-section, .color-theme)[data-theme-mode="secondary"][data-accent-color="accent"],
  :is(.brxe-section, .color-theme)[data-theme-mode="tertiary"][data-accent-color="accent"],
  :is(.brxe-section, .color-theme)[data-theme-mode="accent"][data-accent-color="accent"] {
    --active-accent: var(--color-base-d-3);
  }

  /* ========================================
     ACCENT COLORS - Black & l-3 utilities
     ======================================== */

  :is(.brxe-section, .color-theme)[data-accent-color="black"] {
    --active-accent: var(--color-base-d-3);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"][data-accent-color="black"] {
    --active-accent: var(--color-base-l-2);
  }

  :is(.brxe-section, .color-theme)[data-accent-color="l-3"] {
    --active-accent: var(--color-base-l-3);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="dark"][data-accent-color="l-3"] {
    --active-accent: var(--color-base-l-3);
  }

  /* ========================================
     APPLY COLORS TO ELEMENTS
     ======================================== */

  :is(.brxe-section, .color-theme) :is(h1, h2, h3, h4, h5, h6, .section_headline) {
    color: var(--section-heading-color);
  }

  :is(.brxe-section, .color-theme) :is(p) {
    color: var(--section-text-color);
  }

  :is(.brxe-section, .color-theme) .section_title {
    color: var(--section-title-color, var(--color-brand-primary)) !important;
  }

  :is(.brxe-section, .color-theme) .hero_title {
    color: var(--active-accent);
  }

  :is(.brxe-section, .color-theme) .accent-element {
    color: var(--active-accent);
  }

  :is(.brxe-section, .color-theme) .accent-bg {
    background-color: var(--active-accent);
  }

  :is(.brxe-section, .color-theme) .accent-border {
    border-color: var(--active-accent);
  }

  /* ========================================
     INNER ELEMENT TOKENS
     Highlights, cards, buttons
     ======================================== */

  :is(.brxe-section, .color-theme) .text-highlight {
    color: var(--section-highlight-color);
  }

  :is(.brxe-section, .color-theme) .card_wrapper {
    background-color: var(--section-card-bg);
    border-color: var(--section-card-border);
  }

  .card__icon path {
    fill: var(--card-icon-fill);
  }

  :is(.brxe-section, .color-theme) .card_wrapper :is(h1, h2, h3, h4, h5, h6) {
    color: var(--section-heading-color);
  }

  :is(.brxe-section, .color-theme) .card_wrapper p {
    color: var(--section-text-color);
  }

  :is(.brxe-section, .color-theme)[data-theme-mode="primary"] .card_wrapper p {
    color: var(--color-base-l-4) !important;
  }

  :is(.brxe-section, .color-theme) .btn_primary.brxe-text-link {
    color: var(--btn-text) !important;
  }

  /* ========================================
     BTN OUTLINE
     ======================================== */

  :is(.brxe-section, .color-theme) .btn__outline {
    border-color: var(--btn-outline-border);
    color: var(--btn-outline-text);
    background-color: transparent;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  }

  :is(.brxe-section, .color-theme) .btn__outline svg path {
    fill: var(--btn-outline-text);
    transition: fill .2s ease;
  }

  :is(.brxe-section, .color-theme) .btn__outline:hover {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
    background-color: transparent;
  }

  :is(.brxe-section, .color-theme) .btn__outline:hover svg path {
    fill: var(--color-brand-primary);
  }
}