/*
 * SPDX-FileCopyrightText: Copyright 2025 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 */

.grid {
  container: grid / inline-size;
}

.grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cpd-space-4x);
}

@container grid (width >= 800px) {
  .grid-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.item {
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-2x);
  align-items: flex-start;

  & > * {
    max-width: 100%;
  }

  & .title {
    font: var(--cpd-font-body-sm-semibold);
    letter-spacing: var(--cpd-letter-spacing-body-sm);
    color: var(--cpd-color-text-secondary);
  }

  & .value {
    font: var(--cpd-font-body-md-regular);
    letter-spacing: var(--cpd-letter-spacing-body-md);
    color: var(--cpd-color-text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    & svg {
      display: inline-block;
      vertical-align: top;
      height: var(--cpd-space-5x);
      width: var(--cpd-space-5x);
      color: var(--cpd-color-icon-primary);
      margin-inline-end: var(--cpd-space-2x);
    }

    &[aria-invalid="true"] {
      color: var(--cpd-color-text-critical-primary);

      & svg {
        color: var(--cpd-color-icon-critical-primary);
      }
    }

    & button {
      font: var(--cpd-font-body-sm-semibold);
      letter-spacing: var(--cpd-letter-spacing-body-sm);
      text-decoration: underline;
      cursor: pointer;
      padding: 0 var(--cpd-space-1x);

      &:hover {
        text-decoration: none;
      }
    }
  }
}
