calcite-accordion-item.scss

%icon-position {
  /* icon rotation variables */
  --calcite-accordion-item-icon-rotation: calc(theme("rotate.90") * -1);
  --calcite-accordion-item-active-icon-rotation: theme("rotate.0");
  --calcite-accordion-item-icon-rotation-rtl: theme("rotate.90");
  --calcite-accordion-item-active-icon-rotation-rtl: theme("rotate.0");
}

// icon position variants for child
.icon-position--start {
  @extend %icon-position;
  --calcite-accordion-item-flex-direction: row-reverse;
  --calcite-accordion-item-icon-spacing-start: 0;
  --calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-icon-margin);
}

.icon-position--end {
  @extend %icon-position;
  --calcite-accordion-item-flex-direction: row;
  --calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-icon-margin);
  --calcite-accordion-item-icon-spacing-end: 0;
}

.icon-position--end:not(.icon-type--plus-minus) {
  --calcite-accordion-item-icon-rotation: theme("rotate.0");
  --calcite-accordion-item-active-icon-rotation: theme("rotate.180");
  --calcite-accordion-item-icon-rotation-rtl: theme("rotate.0");
  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme("rotate.180") * -1);
}

:host {
  --calcite-accordion-item-background: theme("backgroundColor.foreground.1");
}

:host-context([appearance="minimal"]) {
  --calcite-accordion-item-padding: var(--calcite-accordion-item-spacing-unit) 0;
}
:host-context([appearance="transparent"]) {
  --calcite-accordion-item-border: transparent;
  --calcite-accordion-item-background: transparent;
}

:host {
  @apply flex
    flex-col
    no-underline
    outline-none
    relative
    text-color-3;
  background-color: var(--calcite-accordion-item-background);
  --calcite-accordion-item-border: theme("borderColor.color.2");
}

// focus styles
:host .accordion-item-header {
  @apply focus-base;
}

:host(:focus) .accordion-item-header {
  @apply focus-inset;
}

:host([active]) {
  @apply text-color-1;
  & .accordion-item-content {
    @apply block text-color-1;
  }
  & .accordion-item-header {
    border-bottom-color: transparent;
  }
}

// .accordion-item-header / content
:host .accordion-item-header {
  @apply flex items-center cursor-pointer;
  flex-direction: var(--calcite-accordion-item-flex-direction);
}

:host .accordion-item-icon {
  @apply inline-flex
    relative
    m-0
    text-color-3
    duration-150
    ease-in-out;
  margin-inline-end: var(--calcite-accordion-item-icon-spacing-start);
  margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);
}

:host .accordion-item-content,
:host .accordion-item-header {
  padding: var(--calcite-accordion-item-padding);
  border-bottom: 1px solid var(--calcite-accordion-item-border);
}

:host .accordion-item-header * {
  @apply inline-flex
    items-center
    duration-150
    ease-in-out;
}

:host .accordion-item-content {
  @apply hidden text-color-3 pt-0;
  text-align: initial;
}

// accordion item icon
:host .accordion-item-expand-icon {
  @apply text-color-3;
  margin-inline-start: var(--calcite-accordion-item-icon-spacing-start);
  margin-inline-end: var(--calcite-accordion-item-icon-spacing-end);
  transform: rotate(var(--calcite-accordion-item-icon-rotation));
}

.calcite--rtl .accordion-item-expand-icon {
  transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));
}

:host([active]) .accordion-item-expand-icon {
  @apply text-color-1;
  transform: rotate(var(--calcite-accordion-item-active-icon-rotation));
}
:host([active]) .calcite--rtl .accordion-item-expand-icon {
  transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));
}

// accordion item title
:host .accordion-item-header-text {
  @apply flex-col flex-grow my-0 py-0;
  text-align: initial;
  margin-inline-end: theme("margin.auto");
}

:host .accordion-item-title,
:host .accordion-item-subtitle {
  @apply flex w-full;
}

:host .accordion-item-title {
  @apply text-color-2 font-medium;
}
:host .accordion-item-subtitle {
  @apply text-color-3 mt-1;
}

:host(:focus),
:host(:hover) {
  & .accordion-item-title {
    @apply text-color-1;
  }
  & .accordion-item-icon {
    @apply text-color-1;
  }

  & .accordion-item-expand-icon {
    @apply text-color-1;
  }
  & .accordion-item-subtitle {
    @apply text-color-2;
  }
}

:host(:focus),
:host(:active),
:host([active]) {
  & .accordion-item-title {
    @apply text-color-1;
  }
  & .accordion-item-icon {
    @apply text-color-1;
  }
  & .accordion-item-expand-icon {
    @apply text-color-1;
  }
  & .accordion-item-subtitle {
    @apply text-color-2;
  }
}