@use '../../../../styles/font' as *;
@use '../../../../styles/variables' as *;

.server-chart {
  display: flex;
  flex-direction: column;
  height: 252px;

  @media (min-width: 1280px) and (max-width: $xxl) {
    height: 280px;
  }

  &__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;

    &-title {
      font-size: $fs-regular;
      font-weight: $fw-lighter;
      margin: 0;
      line-height: 32px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  &__content {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(3, minmax(52px, auto));
    row-gap: 6px;
    margin: 0;
    padding: 0;

    &-item {
      align-items: center;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(64px, 92px);
      column-gap: 8px;
      min-height: 52px;

      &-text-wrapper {
        min-width: 0;

        @media (min-width: 1280px) and (max-width: $xxl) {
          width: 50%;
        }
      }

      &-text {
        width: 100%;
        color: $grey;
        font-weight: $fw-lighter;
        font-size: $fs-small;
        padding-right: 8px;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        @media (min-width: 1280px) and (max-width: $xxl) {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      &-chart {
        min-width: 64px;
        max-width: 92px;
        width: 100%;
      }
    }
  }
}
