@import "../../../../../styles/variables";

:host {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.severity {
  margin: 0;
  padding: 0 1em;
  flex-basis: 100%;
  list-style: none;

  .severity-item-total,
  .severity-item-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }

  .severity-item-total {
    font-size: 26px;
  }

  .severity-item-label {
    margin: 0 0 1em 0;
    flex-basis: 100px;
    min-width: 100px;
    font-size: 12px;
    white-space: nowrap;

    &:last-child {
      margin-bottom: 0;
    }

    .severity-item-label-text {
      display: block;
      flex-basis: 100px;
      min-width: 100px;
    }

    .severity-item-status {
      display: block;
      width: 100%;
      height: 8px;
      flex-basis: 100%;
      border-radius: 8px;
      background: $chef-grey;

      .severity-item-status-bar {
        display: block;
        height: 8px;
        border-radius: 4px;
      }

      &.critical .severity-item-status-bar {
        background: $chef-critical;
      }

      &.major .severity-item-status-bar {
        background: $chef-major;
      }

      &.minor .severity-item-status-bar {
        background: $chef-minor;
      }
    }
  }
}
