@include export-module('cc-co-delivery-planning-tile-status-layout') {
  .co-delivery-planning-tile-status {
    display: flex;
    margin: 10px 0 20px 0;
    flex: 3;
    .tile-status-wrapper {
      display: flex;
      width: 100%;
      justify-content: flex-start;
      gap: 15px;
      flex-wrap: wrap;
      .tile-wrapper-around {
        flex: 1;
      }
    }
    .volume-wrapper, .time-wrapper {
      position: relative;
      height: 24px;
      min-width: 90px;
      span {
        font-size: 12px;
        color: #FFF;
      }
    }
    .tile-label {
      font-size: 10px;
      margin: 5px 0;
      display: block;
      padding-bottom: 7px;
      position: relative;
      white-space: nowrap;
      &:before {
        content: '';
        background: #ccc;
        width: 2px;
        height: 8px;
        left: 2px;
        position: absolute;
        bottom: -2px;
      }
    }
    .volume-wrapper .row, .time-wrapper .row {
      margin-left: 10px;
    }
    .volume-wrapper {
      background-color: rgba($status-first-colour, 0.4);
      border-radius: 0;
      .row {
        position: absolute;
        top: 4px;
      }
      &.overload {
        &::before {
          background: $status-overload-colour;
        }
      }
    }
    .volume-wrapper::before {
      content: '';
      display: flex;
      justify-content: end;
      width: calc(var(--percent) * 1%);
      height: 100%;
      background: $status-first-colour;
      white-space: nowrap;
      max-width:100%;
    }

    .time-wrapper {
      background-color: rgba($status-second-colour, 0.4);
      border-radius: 0;
      .row {
        position: absolute;
        top: 4px;
      }
      &.overload {
        &::before {
          background: $status-overload-colour;
        }
      }
    }
    .time-wrapper::before {
      content: '';
      display: flex;
      justify-content: end;
      width: calc(var(--percent) * 1%);
      height: 100%;
      background: $status-second-colour;
      white-space: nowrap;
      max-width: 100%;
    }
  }
}
