Status: Empty

$status-svg-size: 76px;

.c-status {

  display: inline-flex;
  align-items: center;
  @include shadow(medium);
  border-radius: remify(50px);
  padding: remify(8px) remify(16px) remify(8px) remify(8px);

  .c-billboard__label & {
    box-shadow: none;
    padding: 0;
  }

  &:not(.c-status--delay) svg {
    width: remify($status-svg-size);
    height: remify($status-svg-size); // For IE
    stroke-width: 30;
    background-color: #fff;
    border-radius: 50%;
    padding: remify(4px);

    path {
      stroke: #ccc;
    }

  }

  svg.one {
    path:nth-child(n+1):nth-child(-n+1) {
      stroke: status(positive);
    }
  }

  svg.two {
    path:nth-child(n+1):nth-child(-n+2) {
      stroke: status(warning);
    }
  }

  svg.three {
    path:nth-child(n+1):nth-child(-n+3) {
      stroke: status(warning);
    }
  }

  svg.four {
    path:nth-child(n+1):nth-child(-n+4) {
      stroke: status(negative);
    }
  }

  svg.five {
    path:nth-child(n+1):nth-child(-n+5) {
      stroke: status(negative);
    }
  }

}

.c-status__img {
  position: relative;
  max-height: remify($status-svg-size);

  .c-billboard__label & {
    order: 2;
  }

  .waiting-time {
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    color: secondary(text, 100);

    p {
      font-size: 75%;
    }

    strong {
      font-size: 90%;
      display: block;
      line-height: remify(16px);
    }

  }

}

.c-status__txt {
  margin-left: remify(16px);
  color: primary(night, 100);

  .c-status--delay & {
    text-align: left;
  }

  .c-billboard__label & {
    color: currentColor;
    margin-right: remify(16px);
    margin-left: 0;
    order: 1;
    text-align: right;
  }

  &>* {
    display: block;
  }

  strong {
    font-size: 75%;

    @include min-screen(bp(phone-p)) {
      font-size: 90%;
    }

  }

}