@use '../base/token';
@use '../abstract';
@use '../sprite';

.cds-accordion {
  $this: &;
  $pd-right: 48px;

  &__content {
    margin: 24px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-100);
  }

  &__tit {
    font-size: abstract.rem(token.$font-size-3);
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
    color: var(--gray-700);

    button {
      @include abstract.relative();

      display: block;
      width: 100%;
      padding-right: $pd-right;
      cursor: pointer;
      text-align: left;
      color: currentColor;
      font-weight: inherit;
      font-size: inherit;

      svg {
        @include abstract.absolute($top: 1px, $right: 0);
      }
    }
  } // tit

  &__answer {
    margin-top: 8px;
    padding-right: $pd-right;
    color: var(--gray-400);

    @at-root #{$this}__content:not(.is-active) & {
      display: none;
    }
  } // answer

  & > .is-active {
    padding-bottom: 24px;
  }
}