/* ==========================================================================
 * Route Tier
 * ========================================================================== */

.mds-c-route-tiers {
  margin: auto;
  max-width: 65rem;
  padding: var(--mds-d-spacing--xl);

  @media screen and (min-width: 750px) {
    padding: 6vw var(--mds-d-spacing--xl);
  }
}

.mds-c-route-tier {
  &:not(:last-child)::after {
    background-image: repeating-linear-gradient(
      to bottom,
      var(--mds-t-border-color--primary),
      var(--mds-t-border-color--primary) 20%,
      transparent 20%,
      transparent 40%
    );
    content: '';
    display: block;
    height: 4rem;
    margin: 1.5rem auto;
    width: 2px;
  }
}

.mds-c-route-tier__main {
  --mds-t-background-color: var(--mds-t-background-color--primary);

  background-color: var(--mds-t-background-color);
  border: 1px solid var(--mds-t-border-color--secondary);
  border-radius: var(--mds-d-border-radius--default);
}

.mds-c-route-tier__section {
  padding: var(--mds-d-spacing--lg);

  &:not(:last-child) {
    border-bottom: 1px solid var(--mds-t-border-color--secondary);
  }
}

.mds-c-route-tier__status-message {
  @mixin mds-m-text--size-med;

  padding: var(--mds-d-spacing--sm);
  text-align: center;
}