@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' as *;

:host {
  --cfpb-list-gap: 10px;
}

:host([horizontal]) {
  ul {
    flex-direction: row;
    width: fit-content;

    &:has(cfpb-link:not([inline])) {
      // Mobile only.
      @include respond-to-max($bp-xs-max) {
        flex-direction: column;
        width: 100%;
      }
    }
  }
}

:host([gap='compact']) {
  ul {
    // Tablet and above.
    @include respond-to-min($bp-sm-min) {
      --cfpb-list-gap: 5px;
    }
  }
}

:host([gap='wide']) {
  ul {
    // Tablet and above.
    @include respond-to-min($bp-sm-min) {
      --cfpb-list-gap: 30px;
    }
  }
}

// Tag group sets the spacing between tags.
ul {
  margin: 0;

  // Remove list ul bullets styles.
  padding-left: 0;
  list-style-type: none;

  li {
    margin-bottom: 0;
    display: contents;
  }

  display: flex;
  gap: rem-from-px(var(--cfpb-list-gap));
  flex-wrap: wrap;
  flex-direction: column;

  // Increase gap if the list item is a filter tag.
  &:has(cfpb-tag-filter) {
    --cfpb-list-gap: 15px;
  }

  // Remove gap if list item is a standard (jump) link.
  &:has(cfpb-tag-topic),
  &:has(cfpb-link:not([inline])) {
    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      --cfpb-list-gap: 0;
    }
  }
}

// Right-to-left (RTL) adjustments for arabic pages.
html[lang='ar'] {
  direction: rtl;

  // This is needed for right-to-left (RTL) lists.
  padding-right: 0;
}