.listing-header-block {
  margin-bottom: (20em / $global-size);

  &.calendar {
    @include breakpoint(medium up) {
      max-width: 50%;
    }
  }

  .step-indicator {
    display: inline-block;
    color: $mint;
    font-weight: 600;
    font-size: (16em /$global-size);
    margin-bottom: (4em / $global-size);
    line-height: 1.2;
    @include breakpoint(large up) {
      display: block;
    }
  }

  .step-name {
    line-height: 1.2;
    margin-bottom: (10.66656em / $global-size);
    font-weight: 600;
  }

  .instruction-block {
    display: inline-block;
    line-height: (20em / $global-size);
    font-size: (16em /$global-size);
    color: $white;
    background-color: $charcoal;
    padding: (10em / $global-size) (12em / $global-size);
  }
}

.copy {
  margin-top: (16em / 14);
  line-height: (22em / 14);
  font-size: (14em / 16);
  font-weight: 600;

  .requirement {
    font-weight: 700;
  }
}

.step-tooltip {
  margin-top: 16px;
  display: inline-block;
  position: relative;
  @include breakpoint(large up) {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: unset;
  }
  color: $honey;
  font-size: (14em / 36);

  .material-icons {
    margin-right: 4px;
  }

  &:active,
  &:focus,
  &:hover {
    cursor: pointer;
    color: $honey;

    &::after {
      content: "";
      width: 100%;
      position: absolute;
      bottom: -(9em / 14);
      right: 0;
      height: 2px;
      background-color: $honey;
    }
  }
}

.listing-description-user {
  font-size: 14px;
  line-height: (22em / 14);
  border: 2px solid $light-mint;
  padding: (16em / 14);
  min-height: (200em / 14);
  max-height: (200em / 14);
  min-width: 100%;

  &:focus, &:hover {
    border: 4px solid $mint;
    padding: 20em / 14;
  }
}

.calendar-tooltips-container {
  line-height: 14px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  @include breakpoint(xlarge up) {
    justify-content: space-between;
  }
}