department-of-veterans-affairs/vets-website

@import "~@department-of-veterans-affairs/formation/sass/shared-variables";
// TODO: Look at moving the .process-step css into this file
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-process-list";
// TODO: Determine if we are actually using any of these
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/va-pagination";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-modal";

.claim-list {
  margin-bottom: 2em;
}

#claims-combined {
  margin: 1em 0;
}

.claim-file-border,
.help-heading {
  border-bottom: 3px solid var(--vads-color-primary);
  margin: 10px 0 10px;
  padding-bottom: 9px;
  font-size: 1.35em;
  line-height: 1.2;
  font-weight: bold;
  max-width: 14.0625rem;
}

.claims-status-content {
  .help-sidebar {
    // Line up the bottom border under "Need help?" with the tab list bottom border
    margin-top: calc(1.875rem - 10px);
    margin-bottom: 50px;

    & > div {
      margin-bottom: 1.875rem;
    }
  }

  // The claims container has a sizeable padding; don't make the whitespace bigger
  .claims-container .help-sidebar {
    margin-bottom: 0px;
  }
}

.help-sidebar {
  p {
    margin: 0 0 4px;
  }
}

@media (max-width: $medium-screen) {
  .claims-status-content .help-sidebar {
    margin-top: 0px;
  }
}

.submit-additional-evidence {
  margin-top: 1.5em;
}

.additional-evidence-desc {
  margin: 0;
}

.reviewed-file {
  color: var(--vads-color-success-dark);
}

.tracked-item-due {
  > .due-file {
    color: var(--vads-color-base-darker);
    font-size: 0.9em;
  }

  > .past-due {
    color: var(--vads-color-secondary-darkest);
    font-size: 0.9em;
  }
}

.due-date-header {
  > .due-file {
    color: var(--vads-color-base);
  }

  > .past-due {
    color: var(--vads-color-secondary-darkest);
  }
}

.claim-list-item-container {
  background-color: var(--vads-color-base-lightest);
  padding: 2em 1em 1em;
  margin-bottom: 1em;
  position: relative;
}

.claim-list-item-icon {
  margin-right: 5px;
}

.claim-list-item-text {
  margin: 0;
}

.communications,
.communications-old {
  list-style: none;
  padding: 0;
}

.communications-old,
.status-old {
  margin: 0 0 0.5em;
}

.communications,
.status {
  margin: 0;
}

// Index page V3
.claim-list-item {
  margin-bottom: 1em;

  // TODO: We may or may not use this
  &.in-progress {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.32);
  }

  .card-status {
    margin: 0 0 1em;
    // display: flex;

    p {
      margin-top: 0.25em;
      margin-bottom: 0;
    }
  }
}

.claim-list-item-header {
  margin-top: 0;

  span {
    display: block;
    width: fit-content;
    font-size: 1rem;
    font-family: var(--font-source-sans);
    font-weight: normal;
    line-height: 1.5;
  }

  .usa-label {
    margin-bottom: 1em;
  }
}

.last-changed-label {
  position: absolute;
  top: 0;
  right: 1em;
  background: var(--vads-color-link);
  color: var(--vads-color-white);;
  font-size: 0.8em;
  padding: 0.5em 0.75em;
  border-radius: 0 0 0.5em 0.5em;
}

.claims-status {
  padding: 1em 0 3em;
}

.claims-container {
  &:not(:first-child) {
    padding: 1em 0 3em;
  }

  &:first-child {
    padding-bottom: 3em;
  }

  .claims-container-title {
    margin-bottom: 0;
    & + p {
      margin-top: 0;
    }
  }
}

.claims-status-icon {
  font-size: 24px;
}

.next-action-container {
  padding-right: 1em;
}

.next-action {
  padding: 1em;
  position: relative;

  &.hearing {
    background: var(--vads-color-inset-bg);
  }

  &.soc,
  &.ssoc {
    background: var(--vads-color-gold-lightest);
    padding-left: 2.5em;
  }
}

.last-status {
  margin-top: 1em;
  padding: 0 1em 1em 0;
}

.content {
  position: relative;
  padding-left: 2.03125rem;
}

.last-status-content-icon {
  color: var(--vads-color-success-dark);
  left: 0;
  position: absolute;
  top: 0.1em;
}

.previous-activity {
  margin-top: 1em;
}

.events-list {
  margin: 0;
  padding: 0;
}

.event-item {
  list-style: none;
  border-bottom: solid thin var(--vads-color-base-light);

  &:last-child {
    border: none;
  }
}

.help-phone-number {
  margin: 0.5em 0;
}

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.first-of-type {
  color: var(--vads-color-primary-dark);
  letter-spacing: normal;
  font-size: 1.25em;
}

.file-requirements {
  margin-bottom: 1.5em;
}

.file-requirement-header {
  font-weight: bold;
  margin-bottom: 0;
}

.file-requirement-text {
  margin: 0;
  &:last-child {
    margin-bottom: 1em;
  }
}

.document-item-container {
  background-color: var(--vads-color-base-lightest);
  padding: 1em;
  margin-bottom: 1.5em;
  &:focus {
    outline: none;
  }
}

.document-title-text-container {
  padding-right: 1em;
  word-break: break-all;
}

.remove-document-button {
  margin: 0;
  font-weight: bold;
}

.document-title-row {
  display: flex;
  justify-content: space-between;
}

.document-title {
  font-size: 1.35em;
  line-height: 1.5;
  font-weight: bold;
  padding: 0;
}

.disability-claims-warning {
  background-color: var(--vads-color-warning-lighter);
  text-align: left;
  font-weight: bold;
}

.claims-unavailable {
  margin-top: 0.6em;
  margin-bottom: 1.5em;
}

.claims-upload-input-error-message {
  margin-bottom: 1em;
}

.claims-upload-input-title {
  font-size: 1.15em;
  line-height: 1.5;
  font-weight: bold;
  padding-bottom: 0 !important;
}

.claim-container {
  margin: 0;
  margin-bottom: 2em;
}

.claims-header {
  margin: 0;
}

.claims-files-cancel {
  margin-left: 0;
  @media (min-width: $small-screen) {
    margin-left: 32px;
  }
}

.claims-status-content {
  margin: 0 0;
}

.item-title-container {
  float: none;
  width: 100%;

  @include media($medium-screen) {
    float: left;
    width: 63%;
  }
}

h1:focus {
  outline: none;
}

.va-nav-breadcrumbs:focus {
  outline: none;
}

.notification-close {
  background-color: transparent;
  @media (max-width: $small-screen) {
    margin: -5px 5px 0 0;
    width: 0;
  }
}

.button-container {
  @include media($medium-screen) {
    margin-left: 1em;
    flex-shrink: 0;
  }
}

.item-container {
  margin: 0 0 0.5em 0;
  @include media($medium-screen) {
    margin: 0;
  }
}

.view-details-button {
  margin: 0;
}

.claim-tab-content {
  padding-top: 2em;
}

.claims-paragraph-header {
  padding: 0.5em 0 0 !important;
}

.claim-title {
  margin: 0;
  display: inline-block;

  & > span {
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    display: block;
  }
}

// Claim status page

.claim-contentions {
  margin-top: 0.5em;
  margin-bottom: 2em;
}

.claim-contentions-header {
  display: inline-block;
  margin-right: 6px;
  padding-bottom: 0;
}

.claim-timeline {
  padding-top: 0;

  .section-header-title {
    width: 100%;
    position: relative;
    top: -0.625rem;
    background: inherit;
    border: inherit;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-size-adjust: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: inherit;
    padding: inherit;
    z-index: inherit;
    text-align: left;
  }

  .section-current > .section-header {
    color: var(--vads-color-primary);
  }

  .section-current:before {
    background: var(--vads-color-primary);
  }

  .section-complete:before {
    background: var(--vads-color-success-dark);
    content: "\2713\fe0e";

    @include media($medium-screen) {
      content: "\2714\fe0e";
    }
  }
}

.usa-alert {
  // Remove icons from standard USWDS alert styles
  background-image: none;
  padding-left: 1em;
}

// Slimmed version of .claim-timeline with appeals-specific stuff
// To be used in conjunction with .process .form-process
.appeal-timeline {
  padding-top: 0;
  padding-left: 0;

  &.form-process {
    margin-top: 1em;
    margin-bottom: 0;
  }

  // To get all the li's to flow together, remove the top margin of the titles
  h2,
  h3,
  h4,
  h5 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  li {
    //   // Pull the first bullet point up just a hair to cover the top of the line
    //   // for when the viewport is small.
    //   &:first-child:before {
    //     margin-top: 4px;
    //   }

    &:before {
      background: var(--vads-color-success-dark);
      border-radius: 50%;
      border-width: 4.001px;
    }

    // Move up the headers to align with the bullet point better
    h3 {
      padding-top: 0.4em;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      // Don't put the title on the next line down!
      clear: none;
    }

    button {
      margin-top: 0.1em;
    }
  }

  // Child <li>s are expected to have .process-step as well as a .section-*
  .process-step {
    padding-bottom: 1em;

    &:last-child {
      padding-left: 2em;
    }

    .va-button-link {
      h3 {
        padding-top: 0;
      }
    }
  }

  .section-complete {
    border-left: 5px solid var(--vads-color-base-lighter);
  }

  // Only let the (+) and "See / Hide past events" be clickable
  .past-events-expander {
    position: relative;

    button {
      pointer-events: all;
    }
  }

  .section-unexpanded {
    // offset left border with padding so element doesn't move while toggling expander
    &.process-step {
      padding-left: calc(2em + 5px);
    }

    h2::before {
      content: "\f067";
    }
  }

  .section-expanded {
    border-left: 5px solid var(--vads-color-base-lighter);

    h2::before {
      content: "\f068";
    }
  }

  .appeal-event-date {
    color: var(--vads-color-gray-medium);
  }

  & + .down-arrow {
    width: 0;
    border-left: 0.6em solid transparent;
    border-right: 0.6em solid transparent;
    border-top: 1.2em solid var(--vads-color-base-lighter);
    margin-top: -0.9em;
    margin-left: 0.8em;
  }

  .separator {
    margin: 0.8em 0 0 -0.7em;
    border-top: 1px solid var(--vads-color-base-lighter);
  }
}

.current-status {
  &.closed-claim {
    .current-status-content {
      border-left-color: transparent;

      &::before {
        background-color: var(--vads-color-base-light);
        color: var(--vads-color-base-light);
      }
    }
  }

  h2 {
    margin-top: 1em;
  }

  a.appeals-process-link {
    margin-left: calc(24px + 2em);
  }

  .current-status-content {
    border-left: 5px solid var(--vads-color-base-lighter);
    margin-left: 20px;
    padding-left: 2em;

    h3 {
      clear: none;
      padding-bottom: 0;
      position: relative;
      top: -0.2em;
    }

    + .down-arrow {
      border-left: 0.6em solid transparent;
      border-right: 0.6em solid transparent;
      border-top: 1.2em solid var(--vads-color-base-lighter);
      margin-left: 0.8em;
      margin-top: -1em; // overlap flat part of arrowhead with bottom of gray line
      width: 0;
    }

    &::before {
      background: var(--vads-color-success-dark);
      border: 4px solid var(--vads-color-white);;
      border-radius: 50%;
      color: var(--vads-color-success-dark);
      content: "\2022";
      display: block;
      float: left;
      font-size: 0.8em;
      line-height: 1.4em;
      margin-left: -3.64em;
      position: relative;
      top: -0.2em;
      width: 2em;
    }
  }
}

.va-appeals-content {
  padding: 1em 0 2em;

  .usa-alert-text {
    margin-top: 1em;
  }
}

.claim-timeline-icon {
  float: right;
  margin-top: 3px;
}

.claims-evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.claims-evidence {
  border-bottom: 1px solid var(--vads-color-base-light);
  padding: 1em 0;
  display: flex;
  flex-direction: column;

  @include media($medium-screen) {
    flex-direction: row;
  }

  &:last-child {
    border: none;
    padding-bottom: 0;
  }
}

.claims-evidence-date {
  font-weight: bold;
  padding-right: 10px;

  @include media($medium-screen) {
    width: 25%;
    flex-shrink: 0;
  }
}

.claim-completion-estimation {
  display: inline-block;
  font-weight: bold;
  margin-right: 10px;
}

// Claim detail page

.claim-details {
  margin-top: 0;
}

.claim-detail-list {
  margin: 0;
  padding: 0;
}

.claim-detail-list-item {
  display: block;
}

.claim-detail-label {
  font-size: 0.9em;
  line-height: 1.5;
  font-weight: bold;

  h3 {
    margin: 0;
  }
}

ol.va-list-horizontal {
  list-style-type: none;
  padding: 0;
  margin: 0;
  li {
    border-bottom: 1px solid var(--vads-color-base-light);
  }
}

.submitted-files-list {
  margin-bottom: 2em;
}

.submitted-file-list-item {
  margin: 0.5em 0;
  border-bottom: 1px solid var(--vads-color-base-light);
  &:last-child {
    border: none;
  }
}

.submission-status {
  display: inline-block;
  padding: 0;
  padding-bottom: 8px;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1.5;
}

.submission-icon {
  margin-right: 6px;
}

.docs-filed-text {
  font-weight: bold;
}

.docs-filed-icon {
  margin-right: 6px;
  color: var(--vads-color-success-dark);
}

.submission-description {
  display: inline-block;
  padding: 0 0 0.5em 0;
}

.submission-file-type {
  color: var(--vads-color-primary-darker);
  display: block;
  font-size: 1.15em;
  line-height: 1.5;
  font-weight: bold;
  padding-bottom: 0;
  &.additional-evidence {
    padding-bottom: 0.5em;
  }
}

.submission-date {
  display: inline-block;
  margin-left: 0.5em;
}

.claims-requested-files-container {
  margin-bottom: 1.5em;
}

.primary-alert .due-date-header {
  padding-bottom: 16px;
}

.link-action-container {
  padding-top: 16px;
  margin-left: -2px;
}

.alert-description {
  padding-bottom: 0;
  margin: 0;
}

.file-request-list-item {
  margin-top: 1.5em;
  &:last-child {
    border: none;
  }
}

.file-request-title {
  font-size: 1.15em;
  line-height: 1.5;
  padding-bottom: 0;
  margin-top: 0;
}

.file-request-list-item-optional {
  background-color: var(--vads-color-base-lightest);
}

.past-due-icon {
  margin-right: 3px;
  @include media($medium-screen) {
    margin-right: 6px;
  }
}

.claim-item-label {
  font-weight: bold;
}

.appeals-next-list {
  list-style-type: none;

  li.next-event {
    &:before {
      // styles the bullets to mimic bullets in Timeline
      display: block;
      float: left;
      width: 1em;
      height: 1em;
      content: "";
      border: 4px solid var(--vads-color-gray-medium);
      border-radius: 50%;
      background: var(--vads-color-gray-medium);
      margin-left: -0.6em;
      position: relative;
      top: 0.33em;
    }

    h3 {
      clear: none;
      margin-left: 1.5em;
      margin-top: 0;
      display: block;
    }

    p {
      margin-left: 2.1em;
    }

    .sidelines {
      // line up the horizontal divider with the li::before 'bullets'
      font-family: $font-serif;
      font-size: 1.875rem; // match h2 size
      margin-left: -0.6em;
      width: 102%;
    }
  }

  .decision-review-list {
    li {
      margin-left: 0.5em;
    }
  }
}

.appeals-next-list-no-separator li.next-event {
  margin: 1.5em 0 2em;
}

.alerts-list-container {
  h3 {
    // left-align heading with alert box
    padding-left: 0.85em;
  }

  .alerts-list {
    list-style: none;

    li {
      margin-left: -0.4em;
    }

    .usa-alert {
      h4 {
        margin-top: 0;
      }

      .usa-alert-text {
        margin-top: 1em;
      }
    }
  }
}

.decision-items {
  h5 {
    &.allowed-items {
      color: var(--vads-color-success-dark);
    }
    &.denied-items {
      color: var(--vads-color-secondary);
    }
    font-weight: bold;
  }
}

$end-of-docket-width: 4px;
$docket-bar-width: calc(100% - #{$end-of-docket-width});
$marker-width: 1.875rem;
$marker-text-width: 5.625rem;

.docket-container {
  // This is slightly darker than the cards above it
  background-color: var(--vads-color-gray-light-alt);
  padding: 16px;
  margin: 3em 0px;

  p {
    margin: 0px;
  }

  .appeals-ahead {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vads-color-base-light);
    width: 80%;
    max-width: 15rem;

    & + p {
      margin-top: 6px;
    }
  }

  .marker-container {
    // Same width as .docket-bar so we can more easily line the marker
    //  up with .docket-bar .completed
    width: $docket-bar-width;
    margin-bottom: -16px;

    .marker-text-spacer {
      display: inline-block;
      min-width: $marker-text-width / 2;
      max-width: calc(100% - #{$marker-text-width} / 2);
    }

    .spacer {
      display: inline-block;
    }

    .marker {
      display: inline-block;
      width: $marker-width;
      margin: 0px $marker-width / -2;
    }

    span.marker-text {
      font-weight: bold;
      color: var(--vads-color-primary);
      width: $marker-text-width;
      margin: 0px $marker-text-width / -2;
    }
  }

  .docket-bar {
    display: inline-block;
    // 100% - width of .end-of-docket
    width: $docket-bar-width;
    height: 40px;
    border: 1px solid var(--vads-color-base-light);
    // abuts the .end-of-docket
    border-right: 0px;
    background-color: var(--vads-color-white);;

    .completed {
      background-color: var(--vads-color-primary-dark);
      height: 100%;
    }
  }

  .end-of-docket {
    display: inline-block;
    background-color: var(--vads-color-warning);
    height: 64px;
    width: $end-of-docket-width;
  }

  .front-of-docket-text {
    display: flex;
    flex-direction: row-reverse;

    p {
      width: 5rem;
      text-align: right;
    }
  }
}

.issues-container {
  margin-bottom: 2em;

  & > h2 {
    margin-top: 0;
  }
  .usa-accordion-bordered {
    .usa-accordion-button {
      font-size: 1.25rem; // match standard h3
    }

    .usa-accordion-content {
      padding-top: 1.25em;

      h5 {
        font-family: $font-sans;
        margin-top: 0;
      }
    }

    .granted-section {
      h5 {
        color: var(--vads-color-success-dark);
      }
    }

    .denied-section {
      h5 {
        color: var(--vads-color-secondary);
      }
    }
  }
}

.closed-appeal-notice {
  line-height: 40px;
  text-align: center;
  font-family: $font-sans;
  font-weight: 700;
  font-size: 1.25rem;
  background-color: var(--vads-color-base-lightest);
  margin-top: 2em;
  margin-bottom: 2em;
}

.stem-ad-list {
  list-style-type: disc;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2px;
}
.stem-ad-list-secondary {
  list-style-type: "-";
}
.stem-ad-list-item {
  padding-left: 14px;
}

// React Router Link css that allows us to
// have the same styling as va-link active prop
.active-va-link {
  display: block;
  font-weight: bold;
  margin-top: 16px;

  &:focus va-icon,
  &:hover va-icon {
    margin-left: 0.75rem;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-property: margin;
  }
}

.tabs {
  list-style: none;
  margin-bottom: -1px;
  margin-left: -10px;
  padding: 0;

  & > li {
    display: inline-block;
    margin-bottom: 0;
  }
}

.tab {
  padding: 0.5em 0.9375rem;
  display: inline-block;
  font-size: 20px;
  text-decoration: none;
  color: var(--vads-color-base) !important;

  &:hover {
    text-decoration: none;
    position: relative;

    & > span::after {
      background-color: var(--vads-color-primary);
      border-radius: 0;
      content: "";
      display: block;
      position: absolute;
      height: 6px;
      left: 0.625rem;
      right: 0.625rem;
      bottom: 0;
    }
  }
}

.tab--current {
  font-weight: bold;
  position: relative;
  // Lowering the padding to account for the font-weight: bold above
  padding-left: 0.875rem;
  padding-right: 0.875rem;

  & > span::after {
    background-color: var(--vads-color-primary);
    border-radius: 0;
    content: "";
    display: block;
    position: absolute;
    height: 6px;
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0;
  }
}

.tab-content {
  border-top: 1px solid var(--vads-color-base-light);
}

.tab-panel:focus {
  outline: none;
}

#downtime-app > va-alert {
  margin: 48px auto;
  max-width: 62.5em;
}

@media (max-width: $large-screen) {
  #downtime-app > va-alert {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.claim-phase-diagram {
  text-align: center;
  .desktop {
    display: block;
    @media (max-width: $medium-screen) {
      display: none !important;
    }
  }
  .mobile {
    display: none;
    @media (max-width: $medium-screen) {
      display: block;
    }
  }
}

va-icon.phase-complete {
  color: $color-green; //vads-color-green
}

va-icon.phase-current {
  color: $color-primary; //vads-color-primary
}

.current-phase {
  padding-bottom: 16px;
  display: inline-block;
}


.repeat-phase {
  display: inline-flex;
  flex-direction: row;
  border: 1px solid var(--vads-color-base-light);
  va-icon {
    float: left;
    align-content: center;
    margin-left: 16px;
  }
  span {
    display: inline-block;
    margin: 16px;
  }
}