@use "src/styles/variables" as *;

.vm-metrics-content {
  border: $border-divider;

  &-header {
    margin: -$padding-medium 0-$padding-medium 0;
    background-color: $color-hover-black;

    &__title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    &__tip {
      max-width: 300px;
      white-space: normal;
      padding: $padding-small;

      p {
        margin-bottom: $padding-small;
      }
    }

    &__tip-icon {
      width: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $color-primary;
      margin-right: 4px;
    }
  }

  &_mobile &-header {
    margin: -$padding-global 0-$padding-global 0;
  }

  &__table {
    padding-top: $padding-medium;
    width: calc(100vw - ($padding-large * 4) - var(--scrollbar-width));
    overflow: auto;

    @media (max-width: 768px) {
      width: calc(100vw - ($padding-medium * 2) - var(--scrollbar-width));
    }

    &_mobile {
      width: calc(100vw - ($padding-global * 2) - var(--scrollbar-width));
    }

    .vm-table-cell_header {
      white-space: nowrap;
    }

    th,
    td {
      vertical-align: middle;
      height: 33px;
    }
  }

  &_mobile &__table {
    width: calc(100vw - ($padding-global * 2) - var(--scrollbar-width));
  }

  &__chart {
    padding-top: $padding-medium;
  }

  &-prom-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: $padding-small;
    margin-top: $padding-global;
    text-align: center;

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      margin-bottom: $padding-small;
      color: $color-primary;
    }

    &__title {
      font-size: $font-size-medium;
      font-weight: bold;
    }

    &__text {
      max-width: 700px;
      line-height: 1.3;
    }
  }
}
