/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

#upstream-container .topology-metrics-card:not(:last-child),
#downstream-container .topology-metrics-card:not(:last-child) {
  margin-bottom: 8px;
}
#upstream-container .topology-metrics-card,
#downstream-container .topology-metrics-card {
  display: block;
  color: var(--token-color-foreground-faint);
  overflow: hidden;
  background-color: var(--token-color-surface-primary);
  border-radius: var(--decor-radius-100);
  border: 1px solid;
  /* TODO: If this color is combined with the above */
  /* border property then the compressor removes the color */
  border-color: var(--token-color-surface-interactive-active);
  p {
    @extend %display-300-semibold;
    padding: 12px 12px 0 12px;
    margin-bottom: 0 !important;
  }
  p.empty {
    padding: 12px !important;
  }
  div {
    dl {
      display: inline-flex;
      margin-right: 8px;
    }
    dd {
      color: var(--token-color-foreground-faint);
    }
    span {
      margin-right: 8px;
    }
    span::before,
    dt::before {
      margin-right: 4px;
    }
    .nspace dt::before,
    .health dt::before {
      margin-top: 2px;
    }
    .partition dt::before {
      @extend %with-user-team-mask, %as-pseudo;
    }
    .nspace dt::before {
      @extend %with-folder-outline-mask, %as-pseudo;
    }
    .health dt::before {
      @extend %with-help-circle-outline-mask, %as-pseudo;
    }
    .health dt::before {
      @extend %with-help-circle-outline-mask, %as-pseudo;
    }
    .partition dt::before,
    .nspace dt::before,
    .health dt::before {
      --icon-color: var(--token-color-foreground-faint);
    }
    .passing::before {
      @extend %with-check-circle-fill-mask, %as-pseudo;
      --icon-color: var(--token-color-foreground-success);
    }
    .warning::before {
      @extend %with-alert-triangle-mask, %as-pseudo;
      --icon-color: var(--token-color-foreground-warning);
    }
    .critical::before {
      @extend %with-cancel-square-fill-mask, %as-pseudo;
      --icon-color: var(--token-color-foreground-critical);
    }
    .empty::before {
      @extend %with-minus-square-fill-mask, %as-pseudo;
      --icon-color: var(--token-color-foreground-faint);
    }
  }
  .details {
    padding: 0 12px 12px 12px;
    > *:not(:last-child) {
      padding-bottom: 6px;
    }
    .group {
      display: grid;
      grid-template-columns: 20px 1fr;
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        'partition partition'
        'union namespace';
      span {
        display: inline-block;
        grid-area: union;
        padding-left: 7px;
        margin-right: 0px;
      }
      span::before {
        margin-right: 0px;
        @extend %with-union-mask, %as-pseudo;
        --icon-color: var(--token-color-foreground-faint);
      }
      dl:first-child {
        grid-area: partition;
        padding-bottom: 6px;
      }
      dl:nth-child(2) {
        grid-area: namespace;
      }
    }
  }
}