@use 'uswds-core' as * with (
  $theme-table-border-color: 'base-lighter',
  $theme-table-header-background-color: 'base-lightest'
);
@use 'variables/app' as *;
@use 'variables/email' as *;

@forward 'usa-tag';

.gray {
  &:active,
  &:hover,
  &:link,
  &:visited {
    color: $gray;
  }
}

.hr {
  margin: $hr-margin;
}

.lead {
  hyphens: none;
  margin-bottom: 30px;
}

.s10 {
  font-size: 10px;
  line-height: 10px;
}

.s30 {
  font-size: 30px;
  line-height: 30px;
}

.s60 {
  font-size: 60px;
  line-height: 60px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
}

.button.large.expanded table a {
  padding: 20px 0;
}

.button.expanded.large .btn-warn-bkg {
  background-color: $white;
  border: 0;

  &:hover {
    background-color: $white;
  }
}

.btn-warn-bkg .btn-warn {
  background-color: $red;
  border: 2px solid $red;
  border-radius: 8px;
  color: $white;
  padding: 10px;
  width: 50%;
}

.usa-alert {
  border-left: units($theme-alert-bar-width) solid;

  td {
    padding: units(1.5) 0;

    &:first-child {
      @include u-padding-x(2);
    }
  }

  &.usa-alert--info {
    @include alert-status-wrapper-styles('info');
  }

  &.usa-alert--warning {
    @include alert-status-wrapper-styles('warning');
  }
}

.process-list td {
  padding-bottom: units(4);
}

.process-list__circle {
  border-radius: 50%;
  width: units(3);
  height: units(2.5);
  background-color: color($theme-process-list-counter-background-color);
  border: units($theme-process-list-counter-border-width) solid
    color($theme-process-list-counter-border-color);
  color: color('white');
  font-size: units(2);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  padding-top: units(0.5);
  margin-right: units(1.5);
}

// Design system utility classes are duplicated here as a compromise to allow for consistent usage
// while avoiding performance cost of importing the full design system. Feel free to add as needed.

.border-1px {
  @include u-border(1px);
}

.border-top-0 {
  @include u-border-top(0);
}

.border-primary-light {
  @include u-border('primary-light');
}

.display-inline-block {
  @include u-display('inline-block');
}

.display-block {
  @include u-display('block');
}

.font-heading-lg {
  @include u-font('heading', 'lg');
}

.font-heading-md {
  @include u-font('heading', 'md');
}

.font-sans-md {
  @include u-font('sans', 'md');
}

.font-family-mono {
  font-family: monospace;
}

.margin-bottom-0 {
  @include u-margin-bottom(0);
}

.margin-bottom-1 {
  @include u-margin-bottom(1);
}

.margin-bottom-105 {
  @include u-margin-bottom(1.5);
}

.margin-bottom-2 {
  @include u-margin-bottom(2);
}

.margin-bottom-3 {
  @include u-margin-bottom(3);
}

.margin-bottom-4 {
  @include u-margin-bottom(4);
}

.margin-top-0 {
  @include u-margin-top(0);
}

.margin-top-5 {
  @include u-margin-top(5);
}

.margin-y-1 {
  @include u-margin-y(1);
}

.margin-x-auto {
  @include u-margin-x('auto');
}

.margin-y-105 {
  @include u-margin-y(1.5);
}

.margin-y-4 {
  @include u-margin-y(4);
}

.padding-4 {
  @include u-padding(4);
}

.padding-x-4 {
  @include u-padding-x(4);
}

.padding-bottom-0 {
  @include u-padding-bottom(0);
}

.padding-bottom-4 {
  @include u-padding-bottom(4);
}

.padding-top-4 {
  @include u-padding-top(4);
}

.radius-lg {
  @include u-radius('lg');
}

.text-bold {
  @include u-text('bold');
}

.text-center {
  @include u-text('center');
}

.usa-list {
  @extend %usa-list;

  li {
    @extend %usa-list-item;
  }
}

.usa-table {
  @include usa-table;

  border-collapse: separate;
  border-spacing: 0;

  tbody td {
    border-top: 0;
  }

  thead th:first-child {
    border-top-left-radius: units(0.5);
  }

  thead th:last-child {
    border-top-right-radius: units(0.5);
  }

  tbody tr:last-child td:first-child {
    border-bottom-left-radius: units(0.5);
  }

  tbody tr:last-child td:last-child {
    border-bottom-right-radius: units(0.5);
  }
}
