@use "00-base/configure" as *;

.ma__wait-time {

  &__title {

    @include ma-border-decorative;

    @include ma-h3;
    margin-bottom: .75em;
    padding-bottom: .5em;

    &:after {
      width: 100%;
    }

    span,
    & > svg {
      display: inline-block;
      vertical-align: middle;
    }

    & > svg {
      height: 40px;
      width: 40px;
    }

    span {
      font-size: $fonts-large;
      letter-spacing: $letter-spacing-large;
      line-height: 1.39;
      padding-left: 5px;
      padding-top: 7px;
      text-transform: uppercase;
    }
  }

  &__items {

    @include ma-reset-list;
    display: flex;
      flex-wrap: wrap;
      align-items: stretch;
  }

  &__item {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 20px;
    width: 50%;

    &:nth-child(even) {
      border-left: 1px solid;
      padding-left: 38px;
    }

    &:nth-child(odd) {
      padding-right: 38px;
    }
  }

  &__label {
    font-size: $fonts-xsmall;
    letter-spacing: $letter-spacing-large;
    line-height: 1.27;
    margin-bottom: 0;
    text-transform: uppercase;
  }

  &__time {
    font-size: $fonts-3xlarge;
  }

  &__units {
    font-size: $fonts-larger;
  }
}

//theme

.ma__wait-time {

  &__title {

    @include ma-border-decorative($c-highlight);

    svg {
      color: var(--mf-c-highlight);
    }

  }

  &__item {

    &:nth-child(even) {
      border-color: var(--mf-c-bd-divider);
    }
  }

  &__label {
    color: var(--mf-c-font-medium);
    font-weight: $fonts-bold;
  }

  &__time {
    font-weight: 900;
  }

  &__units {
    font-weight: $fonts-normal;
  }
}