$border-radius: 6px;

.d-accordion-item {
  background-color: var(--d-color-neutral-00);
  display: flex;
  flex-direction: column;

  &:first-of-type {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }

  &:last-of-type {
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  &.d-accordion-expanded {
    .d-accordion-icon-toggle {
      transform: rotate(180deg);
    }

    .d-accordion-body {
      display: flex;
    }
  }

  &.d-accordion-disabled {
    .d-accordion-header,
    .d-accordion-body {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}

.d-accordion-header {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  .d-accordion-icon-toggle {
    color: var(--d-color-neutral-80);
  }
}

.d-accordion-title {
  color: var(--d-color-neutral-90);
  font-size: 16px;
  font-family: var(--d-font-stacks);
  font-weight: 500;
  line-height: 24px;
  user-select: none;
  display: flex;
  align-items: center;
}

.d-accordion-body {
  padding: 0 16px 16px;
  display: none;
}