.cobalt- {
  &accordions-list__item {
    @apply c-text-base;
    overflow: hidden;

    &[data-disabled] {
      @apply c-text-disabled;
      cursor: not-allowed;
    }
  }

  &accordion__header {
    @apply c-text-title-xs c-p-sm c-bg-secondary c-cursor-pointer c-state-interactive c-transition-interactive c-gap-sm;

    width: 100%;
    display: flex;

    border: 0;

    &[disabled] {
      cursor: not-allowed;
    }

    &--left-toggle-icon {
      flex-direction: row-reverse;
    }

    &-content {
      @apply c-font-base;
      width: 100%;

      text-align: left;
    }

    // Chevron icon
    &-chevron-icon {
      transition: transform 0.25s ease-out;

      &--opened {
        transform: rotate(-180deg);
      }
    }

    // Animated +/- icon
    &-icon {
      position: relative;

      width: 14px;
      height: 14px;
      min-width: 14px;
      min-height: 14px;
      margin: auto;

      &::before,
      &::after {
        position: absolute;

        // This element is actually an icon but animated, so we can use icon/text colors here
        background-color: theme("semanticTextColor.subdued");
        content: "";

        transition: transform 0.25s ease-out;
      }
      /* Vertical line */
      &::before {
        top: 0;
        left: 50%;

        width: 2px;
        height: 100%;
        margin-left: -1px;
      }
      /* horizontal line */
      &::after {
        top: 50%;
        left: 0;

        width: 100%;
        height: 2px;
        margin-top: -1px;
      }

      &--opened::before {
        transform: rotate(270deg);
      }

      &--opened::after {
        transform: rotate(360deg);
      }
    }
  }

  &accordion__panel {
    @apply c-border-t c-border-t-base;
  }
}

// Animate the opening and closing of the panel
// source: https://ark-ui.com/react/docs/components/accordion#animate-content-size
@keyframes slideAnimation {
  from {
    height: 0;

    opacity: 0.01;
  }

  to {
    height: var(--height);

    opacity: 1;
  }
}

[data-scope="accordion"][data-part="item-content"][data-state="open"] {
  animation: slideAnimation 200ms ease-in-out;
}

[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
  animation: slideAnimation 200ms ease-in-out reverse;
}