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

.root {
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-6x);
}

.header {
  display: grid;
  gap: var(--cpd-space-2x);
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--cpd-space-2x);
  border-bottom: 2px solid var(--cpd-color-border-interactive-secondary);

  & .header-title {
    font: var(--cpd-font-heading-sm-semibold);
    letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
    color: var(--cpd-color-text-primary);
  }

  & .header-controls {
    display: flex;
    align-items: center;
    gap: var(--cpd-space-2x);
    height: var(--cpd-space-7x);
  }

  & .active-filter-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cpd-space-2x);
    grid-column: 1 / -1;
    margin-block-end: var(--cpd-space-1x);

    & .active-filter {
      display: flex;
      align-items: center;
      gap: var(--cpd-space-1x);
      padding-block: var(--cpd-space-1x);
      padding-inline: var(--cpd-space-3x) var(--cpd-space-2x);
      block-size: var(--cpd-space-7x);
      border-radius: var(--cpd-radius-pill-effect);
      color: var(--cpd-color-text-on-solid-primary);
      background-color: var(--cpd-color-bg-action-primary-rest);
      font: var(--cpd-font-body-xs-medium);
      letter-spacing: var(--cpd-font-letter-spacing-body-xs);

      @media (hover: hover) {
        &:has(.remove-filter-button:hover) {
          background-color: var(--cpd-color-bg-action-primary-hovered);
        }
      }

      & .remove-filter-button {
        font-size: var(--cpd-space-4x);
        color: var(--cpd-color-icon-on-primary);

        @media (hover: hover) {
          color: var(--cpd-color-icon-tertiary);

          &:hover {
            color: var(--cpd-color-icon-on-primary);
          }
        }
      }
    }
  }
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cpd-space-1x);
  gap: var(--cpd-space-1-5x);
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;

  & .filter-icon {
    width: var(--cpd-space-5x);
    height: var(--cpd-space-5x);
    color: var(--cpd-color-icon-secondary);
  }

  & .filter-button-label {
    text-decoration: underline;
    font: var(--cpd-font-body-md-medium);
    letter-spacing: var(--cpd-font-letter-spacing-body-md);
    color: var(--cpd-color-text-secondary);
  }

  &:hover {
    background-color: var(--cpd-color-bg-subtle-secondary);

    & .filter-icon {
      color: var(--cpd-color-icon-primary);
    }

    & .filter-button-label {
      color: var(--cpd-color-text-primary);
    }
  }

  &:focus-visible {
    outline: 2px solid var(--cpd-color-border-focused);
    outline-offset: 2px;
  }
}

@media screen and (width <= 768px) {
  .filter-button-label {
    display: none;
  }
}

.list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  max-width: 100%;
  overflow: auto hidden;
  scrollbar-width: none;
}

.table {
  text-wrap: nowrap;
  border-collapse: separate;
}

.header-row {
  height: var(--cpd-space-10x);
}

.header-cell {
  padding: var(--cpd-space-1x) 0;
  text-align: left;
  font-weight: normal;
  border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);

  &:first-child {
    padding-left: var(--cpd-space-4x);
  }

  &:last-child {
    padding-right: var(--cpd-space-4x);
  }

  &.align-center {
    text-align: center;
  }

  &.align-right {
    text-align: right;
  }
}

.header-cell-content {
  display: flex;
  align-items: center;
  gap: var(--cpd-space-1x);
  justify-content: flex-start;

  .align-center & {
    justify-content: center;
  }

  .align-right & {
    justify-content: flex-end;
  }
}

.header-label {
  font: var(--cpd-font-body-sm-medium);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  text-transform: uppercase;
  color: var(--cpd-color-text-secondary);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.tbody {
  background-color: var(--cpd-color-bg-canvas-default);
}

.row {
  height: var(--cpd-space-14x);
  transition: background-color var(--default-transition-duration)
    var(--default-transition-timing-function);

  &:hover {
    background-color: var(--cpd-color-bg-action-secondary-hovered);
  }

  /* The row selection style is done automatically based on if there is an
     'active' link in the row. This avoids a bunch of react re-renders when
     switching page */
  &:has([aria-current="page"]),
  &:has([aria-current="page"]):hover {
    background-color: var(--cpd-color-bg-subtle-primary);
  }
}

.cell {
  vertical-align: middle;
  border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);

  &:first-child {
    padding-left: var(--cpd-space-4x);
  }

  &:last-child {
    padding-right: var(--cpd-space-4x);
  }

  &.align-center {
    text-align: center;
  }

  &.align-right {
    text-align: right;
  }
}

@media screen and (width <= 768px) {
  .header-title {
    font: var(--cpd-font-heading-md-semibold);
    letter-spacing: var(--cpd-font-letter-spacing-heading-md);
  }

  .cell {
    padding: var(--cpd-space-2x) 0;
  }

  .cell,
  .header-cell {
    &:first-child {
      padding-left: var(--cpd-space-2x);
    }

    &:last-child {
      padding-right: var(--cpd-space-2x);
    }
  }
}
