@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities' as *;
@use '@cfpb/cfpb-design-system/src/components/cfpb-typography/mixins' as *;

// Filter tags appear in filtered contexts, often as part of multiselects.
.a-tag-filter {
  line-height: math.div(19px, $base-font-size-px);

  display: flex;
  gap: math.div(10px, $btn-font-size) + rem;

  border: 1px solid var(--teal);
  padding: 4px 6px;
  background-color: var(--teal-20);
  border-radius: math.div(3px, $base-font-size-px) + rem;
  color: var(--black);
  text-align: left;
  min-width: fit-content;

  .cf-icon-svg {
    pointer-events: none;

    // Prevent flexbox from squishing icon when tag text is long.
    flex: none;
  }

  // If the contents are wrapped in a label, negate the label's display.
  > label {
    display: contents;
    pointer-events: none;
  }
}

button.a-tag-filter,
a.a-tag-filter {
  &:hover {
    background-color: var(--teal-40);
    cursor: pointer;
  }

  &:focus {
    outline: 1px dotted var(--teal);
    outline-offset: 1px;
  }

  &:active {
    background-color: var(--teal-60);
  }
}

a.a-tag-filter {
  text-decoration: none;

  // Colors for :link, :visited, :hover, :focus, :active.
  @include u-link-colors(
    var(--black),
    var(--black),
    var(--black),
    var(--black),
    var(--black),
    var(--teal),
    var(--teal),
    var(--teal),
    var(--teal),
    var(--teal-60)
  );
}

// Topic tags
.a-tag-topic {
  display: flex;
  gap: math.div(5px, $btn-font-size) + rem;
}

@include u-jump-link(
  $jump-link-class: 'a-tag-topic',
  $jump-link-text-class: 'a-tag-topic__text',
  $is-gold: true
);
@include u-jump-link-group($jump-link-class: 'a-tag-topic');

.a-tag-topic__bullet {
  font-size: 1rem;
  line-height: 1rem;
}

// Tablet and above.
@include respond-to-min($bp-sm-min) {
  a.a-tag-topic__text {
    // Colors for :link, :visited, :hover, :focus, :active
    @include u-link-colors(
      var(--gray),
      var(--gray),
      var(--gray),
      var(--gray),
      var(--gray)
    );
  }

  a.a-tag-topic,
  a.a-tag-topic:visited,
  a.a-tag-topic:hover,
  a.a-tag-topic:focus,
  a.a-tag-topic:active {
    text-decoration: none;
    border-bottom: none;
    outline-offset: 1px;

    .a-tag-topic__text {
      // Move the underline down 1px.
      padding-bottom: 1px;
      border-bottom: 1px dotted var(--gold-80);
    }
  }

  a.a-tag-topic:hover .a-tag-topic__text {
    border-bottom: 1px solid var(--gold-80);
  }

  a.a-tag-topic:focus {
    outline-color: var(--gray);

    .a-tag-topic__text {
      border-bottom-style: solid !important;
    }
  }
}

// Tag group sets the spacing between tags.
.m-tag-group {
  // Remove list (ul/ol) bullets styles.
  padding-left: 0;
  list-style-type: none;

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

  // Tablet and above.
  @include respond-to-min($bp-sm-min) {
    display: flex;
    gap: math.div(15px, $btn-font-size) + em;
    flex-wrap: wrap;

    &--stacked {
      flex-direction: column;
      width: fit-content;
    }
  }

  &:has(.a-tag-filter) {
    display: flex;
    gap: math.div(15px, $btn-font-size) + em;
    flex-wrap: wrap;
  }
}

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

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