@use '../style/base' as *;

@include bem(accordion-item) {
  @include b() {
    @include universal;
    background: var(--sar-accordion-bg);

    &::before {
      @include border-top(var(--sar-accordion-border-color));
      left: var(--sar-accordion-item-header-padding-x);
      right: var(--sar-accordion-item-header-padding-x);
    }

    &:first-child::before {
      display: none;
    }
  }

  @include e(header) {
    @include universal;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--sar-accordion-item-header-padding-y)
      var(--sar-accordion-item-header-padding-x);
    cursor: pointer;
  }

  @include e(title) {
    font-size: var(--sar-accordion-item-title-font-size);
    line-height: var(--sar-accordion-item-title-line-height);
  }

  @include e(extra) {
    margin-left: auto;
  }

  @include e(arrow) {
    @include universal;
    align-items: center;
    justify-content: center;
    margin-left: var(--sar-accordion-item-arrow-margin-left);
    font-size: var(--sar-accordion-item-arrow-font-size);
    color: var(--sar-accordion-item-arrow-color);
  }

  @include e(body) {
    @include universal;
    padding: var(--sar-accordion-item-body-padding-y)
      var(--sar-accordion-item-body-padding-x);

    &::before {
      @include border-top(var(--sar-accordion-border-color));
      left: var(--sar-accordion-item-body-padding-x);
      right: var(--sar-accordion-item-body-padding-x);
    }
  }

  @include m(disabled) {
    @include e(header) {
      cursor: not-allowed;
    }
    @include e(title, arrow) {
      color: var(--sar-disabled-color);
    }
  }

  @include m-not(disabled) {
    @include e(header) {
      &:active {
        background: var(--sar-accordion-active-bg);
      }
    }
  }

  @include m(borderless) {
    &::before {
      display: none;
    }

    @include e(body) {
      &::before {
        display: none;
      }
    }
  }
}