// AutoUpdateFileChromatic
@use "uswds-core" as *;

$theme-hr-border-color: "base-lighter";
$theme-hr-alternate-border-color: "primary";

.usa-prose hr,
hr {
  border: 1px solid color($theme-hr-border-color);
  @include u-margin-bottom(4);
  @include u-margin-top(4);

  &.rs-hr--half-margin {
    @include u-margin-bottom(2);
    @include u-margin-top(2);
  }

  &.rs-hr--alternate {
    @include u-border("2px", "blue-warm-70v");
    margin-bottom: unset;
  }

  &.rs-hr--base-lighter-alternate {
    margin-block-start: 32px;
  }
}

.usa-link--unstyled {
  all: unset;
  cursor: pointer;
}

.usa-icon-button {
  border-radius: 100%;
  padding: 0.25rem 0.25rem;
}

.font-size-18 {
  font-size: 18px;
}

.usa-timestamp {
  color: color("gray-cool-50");
}

// FileHandler.tsx
.file-handler-table {
  .usa-table {
    // @override _table.scss
    td {
      background-color: transparent;
    }
  }
}
// End -- FileHandler.tsx

// FileHandlerMessaging.tsx
.validation-section-header {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}
// End -- FileHandlerMessaging.tsx

// Message Tracker specific styles for Accordion component
.message-tracker {
  .usa-accordion__button {
    color: white;
    background-color: color("primary");
    @include add-background-svg("usa-icons-bg/remove--white");

    &[aria-expanded="false"] {
      @include add-background-svg("usa-icons-bg/add--white");
    }
  }
  .usa-accordion__button:hover,
  .usa-accordion__button:focus {
    color: white;
    background-color: color("primary");
  }
  .usa-accordion--bordered .usa-accordion__content {
    border-color: color("primary");
    border-width: medium;
  }
}

.manage-public-key {
  .usa-icon {
    font-size: 20px;
  }
}

.manage-public-key-configured {
  .usa-icon {
    font-size: 18px;
    margin-left: 5px;
  }
}

// FAQ
.faq-wrapper {
  .heading {
    h3 {
      padding-bottom: 20px;
      color: #71767a;
      font-weight: 500;
    }
  }

  section {
    margin-top: 30px;
    border-top: 1px solid #dfe1e2;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    margin-top: 40px;
  }
}
