@use "uswds-core" as *;

.usa-site-alert .usa-site-alert--info .usa-alert .usa-alert__body {
  background-color: color("yellow-5");
}

.usa-identifier__required-links-item a {
  text-underline-offset: 2px;
}

// overrides for usa-table on /data page
.usa-table.usa-table--borderless {
  thead {
    background-color: color("gray-10");
  }

  thead th {
    font-size: size("sans", "md");
  }

  td {
    font-size: size("sans", "md");
    padding: units(2);
  }

  // add bottom spacing for download buttons in table
  .usa-button:first-child {
    margin-bottom: units("05");

    @include at-media("desktop-lg") {
      margin-bottom: 0;
    }
  }
}

// This definition has to be very specific to override. USWDS really wants to
// put an extra margin at the bottom of the last child card in a card group.
ul.usa-card-group {
  li.usa-card {
    margin-bottom: 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// USWDS wants to add padding when there is a single element in the card
// container, but if we add padding-0 class, it should not have padding
.usa-card:not(.usa-card--flag) .usa-card__container>.padding-0 {
  padding: 0;
}

.usa-card:not(.usa-card--flag) .usa-card__container>:only-child {
  padding: 0;
}

// USWDS Tooltips don't work when wrapping an anchor tag. A workaround is to put
// the tooltip within the anchor, wrapping the text for the anchor. Add styles
// for this specific scenario so that the text is styled like other anchor tags.
a {
  span.usa-tooltip {
    span.usa-tooltip__trigger {
      text-decoration: underline;
    }
  }
}

// Use the white open/close button for accordions when the .white class is
// applied
.usa-accordion__heading {
  .usa-accordion__button.white {
    &[aria-expanded="true"] {
      background-image: url("../css/img/remove-white.svg");
    }

    &[aria-expanded="false"] {
      background-image: url("../css/img/add-white.svg");
    }
  }
}

// The USWDS style for overflow is "auto" which cuts off things like tooltips
// that may overflow the accordion content element. Using "visibile" will let
// tooltip content be shown. We just have to be careful not to let regular
// content also overflow.
.usa-accordion__content {
  overflow: visible;
}
