@use '../settings/variables' as v;
@use '../settings/mixins' as m;

/* stylelint-disable selector-no-qualifying-type, max-nesting-depth */
.qpp-c-details {
  > summary {
    cursor: pointer;
    list-style: none;
    border: 1px solid transparent;

    svg {
      display: inline-block;
    }

    .qpp-c-details--icon-open {
      display: none;
    }

    &:focus {
      @include m.focus-ring;
    }
  }

  > summary::marker,
  > summary::-webkit-details-marker {
    display: none;
  }

  &.qpp-c-details--header {
    > summary {
      background-color: v.$gray-04;
      width: 100%;
      padding: v.$spacing-12 v.$spacing-40;
      color: v.$gray-90;
      font-size: v.$font-size-20;
      font-weight: v.$font-regular;
      display: flex;
      gap: 0.5ch;
      justify-content: space-between;
      align-items: center;
      word-break: break-word; // for older Safari
      overflow-wrap: anywhere;

      > svg {
        @include m.mat-icon-medium;
      }

      span {
        &.qpp-c-details--icon,
        &.qpp-c-details--icon-closed,
        &.qpp-c-details--icon-open {
          font-weight: v.$font-medium;
          color: v.$blue-60;
          font-size: v.$font-size-16;
          line-height: 2;
          width: 6ch;
          text-align: end;
          white-space: nowrap;

          > svg {
            @include m.mat-icon-medium;
          }
        }
      }

      &:focus {
        @include m.focus-ring;
      }
    }
  }

  &[open] {
    > summary {
      .qpp-c-details--icon-closed {
        display: none;
      }
      .qpp-c-details--icon-open {
        display: inline-block;
      }
    }
  }
}

.qpp-c-details-list {
  @include m.unstyled-list;

  > * {
    padding-bottom: v.$spacing-16;
  }
}
/* stylelint-enable selector-no-qualifying-type, max-nesting-depth */