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

.vm-cardinality-panel {
  display: grid;
  align-items: flex-start;
  gap: $padding-large;

  &_mobile, &_mobile &-tips {
    gap: $padding-small;
  }

  &-tips {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: $padding-medium;
    flex-grow: 1;
    width: 100%;
  }

  &-table {
    &__header {
      th:first-child {
        width: 60%;
      }
    }

    &__progress {
      display: grid;
      grid-template-columns: minmax(160px, 1fr) repeat(2, auto);
      white-space: nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: $padding-small;
      font-size: $font-size-small;
    }
  }
}
