/* =========================================================
   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;
}