/* =========================================================
   Accordion
   ========================================================= */
   
   /* ---------------------------------------------------------
   Accordion Tile hover
   --------------------------------------------------------- */
   
   .component-library--c-accordion__tile.cc-expanded:hover {
    background-color: var(--component-library---color--surface--elevated)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-4b8a6a4c-69b9-b87f-dd92-423e61ad4129) {
    background-color: var(--component-library---color--surface--brand-dark);
    color: var(--component-library---color--text--primary-on-brand)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-8b3ccab1-074c-9424-32d2-7c458d4a9a51) {
    background-color: var(--component-library---color--surface--brand-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-804b5d02-a296-f5c0-53e6-4e237084ec0e) {
    background-color: var(--component-library---color--surface--accent-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-7728a532-fe38-8d89-bd8f-7dc0ebe0e420) {
    background-color: var(--component-library---color--surface--brand-dark)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-877e38d2-d5b7-ad03-5bd7-125bb6665fc0) {
    background-color: var(--component-library---color--surface--brand-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-86651757-aa68-df66-a0dd-674b0ac69114) {
    background-color: var(--component-library---color--surface--accent-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-994ef406-4723-0783-547d-d9879f06dafd) {
    background-color: var(--component-library---color--surface--brand-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-00f396e0-eb52-4d01-5c4f-8db14f47b11b) {
    background-color: var(--component-library---color--surface--brand-dark);
    color: var(--component-library---color--text--primary-on-brand)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-03111db4-af64-456c-1674-eeefacf2c41a) {
    background-color: var(--component-library---color--surface--accent-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-703919cd-0c18-fa46-03cd-33466841e388) {
    background-color: var(--component-library---color--surface--brand-dark)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-919e1da7-902a-f50e-fa33-ddba501bbe67) {
    background-color: var(--component-library---color--surface--brand-light)
}

.component-library--c-accordion__tile.cc-expanded:hover:where(.w-variant-b87e9fd2-5d38-889f-24e1-5e9ee962e847) {
    background-color: var(--component-library---color--surface--accent-light)
}


/* =========================================================
   Sequence Marker
   ========================================================= */

/* Pseudo Element */
.c-indicator__marker::before,
.component-library--c-indicator__marker::before {
  content: "";
}


/* ---------------------------------------------------------
   Active Marker
   --------------------------------------------------------- */

.c-sequence__item[aria-current="step"] :is(
  .c-indicator__marker,
  .component-library--c-indicator__marker
)::before,

.component-library--c-sequence__item[aria-current="step"] :is(
  .c-indicator__marker,
  .component-library--c-indicator__marker
)::before,

:is(
  .splide__slide.cc-sequence-horizontal,
  .component-library--splide__slide.cc-sequence-horizontal
)[aria-current="step"] :is(
  .c-indicator__marker,
  .component-library--c-indicator__marker
)::before {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: var(--component-library---radius--round, 999px);

  background-color: var(
    --component-library---color--text--brand,
    var(--color--text--brand, #6f01f5)
  ) !important;
}


/* ---------------------------------------------------------
   Vertical Accent
   --------------------------------------------------------- */

.c-sequence__item[aria-current="step"]
[data-wf--indicator--variant="accent"]
:is(.c-indicator__marker, .component-library--c-indicator__marker)::before,

.c-sequence__item[aria-current="step"]
[data-wf--component-library--indicator--variant="accent"]
:is(.c-indicator__marker, .component-library--c-indicator__marker)::before,

.component-library--c-sequence__item[aria-current="step"]
[data-wf--indicator--variant="accent"]
:is(.c-indicator__marker, .component-library--c-indicator__marker)::before,

.component-library--c-sequence__item[aria-current="step"]
[data-wf--component-library--indicator--variant="accent"]
:is(.c-indicator__marker, .component-library--c-indicator__marker)::before {
  background-color: var(
    --component-library---accent-dark,
    var(--accent-dark, #ff7b00)
  ) !important;
}


/* ---------------------------------------------------------
   Horizontal Accent
   --------------------------------------------------------- */

:is(
  .splide__slide.cc-sequence-horizontal,
  .component-library--splide__slide.cc-sequence-horizontal
)[aria-current="step"]
[data-wf--indicator-horizontal--variant="accent"]
:is(
  .c-indicator__marker,
  .component-library--c-indicator__marker
)::before,

:is(
  .splide__slide.cc-sequence-horizontal,
  .component-library--splide__slide.cc-sequence-horizontal
)[aria-current="step"]
[data-wf--component-library--indicator-horizontal--variant="accent"]
:is(
  .c-indicator__marker,
  .component-library--c-indicator__marker
)::before {
  background-color: var(
    --component-library---accent-dark,
    var(--accent-dark, #ff7b00)
  ) !important;
}


/* ---------------------------------------------------------
   Accordion Indicator Rotation
   --------------------------------------------------------- */

:is(
  .c-sequence__tile-indicator-wrap,
  .component-library--c-sequence__tile-indicator-wrap
) {
  transition: transform 0.3s ease;
}

:is(
  .c-sequence__tile-indicator-wrap,
  .component-library--c-sequence__tile-indicator-wrap
):is(
  .cc-expanded,
  .component-library--cc-expanded
) {
  transform: rotate(180deg);
}


/* ---------------------------------------------------------
   Sequence / Timeline Indicator Lines
   --------------------------------------------------------- */

:is(
  .c-sequence__item,
  .component-library--c-sequence__item
):first-child
:is(
  .c-indicator__top,
  .component-library--c-indicator__top
) {
  opacity: 0;
}

:is(
  .c-sequence__item,
  .component-library--c-sequence__item
):last-child
:is(
  .c-indicator__bottom,
  .component-library--c-indicator__bottom
) {
  opacity: 0;
}