discourse/app/assets/stylesheets/admin/admin_table.scss

@use "lib/viewport";

.d-admin-table {
  @include viewport.until(md) {
    border-collapse: collapse;
    margin-bottom: var(--space-3);
  }

  thead {
    @include viewport.until(md) {
      display: none;
    }
  }

  th {
    color: var(--primary-high);
  }

  .d-admin-row__content {
    position: relative;
    padding: var(--space-1) 0;

    @include viewport.until(md) {
      display: block;
      margin-bottom: var(--space-3);
      border: 1px solid var(--content-border-color);
    }
  }

  td {
    vertical-align: middle;

    @include viewport.until(md) {
      display: block;
      border-top: 1px solid var(--content-border-color);
    }

    &:first-child {
      @include viewport.until(md) {
        border-top: 0;
      }
    }

    &.d-admin-row__overview {
      @include viewport.until(md) {
        width: auto;
        border-top: 0;
      }
    }

    &.d-admin-row__detail {
      @include viewport.until(md) {
        display: flex;
        justify-content: space-between;
      }
    }

    &.d-admin-row__controls {
      text-align: right;
      width: auto;

      @include viewport.until(md) {
        position: absolute;
        top: -3px;
        right: 0;
        border-top: 0;
        width: auto;
      }
    }
  }

  // Default
  .status-label {
    --d-border-radius: var(--space-4);
    --status-icon-diameter: 8px;
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    background-color: var(--primary-low);
    padding: var(--space-half) var(--space-2);
    border-radius: var(--d-border-radius);

    .status-label-indicator {
      display: inline-block;
      width: var(--status-icon-diameter);
      height: var(--status-icon-diameter);
      border-radius: 50%;
      background-color: var(--primary-high);
      flex-shrink: 0;
      margin-right: var(--space-1);
      margin-top: 0.35rem;
    }

    .status-label-text {
      color: var(--primary-high);
      font-size: var(--font-down-1);
    }
  }

  &__badge {
    background-color: var(--primary-low);
    border-radius: var(--d-border-radius);
    font-size: var(--font-down-1);
    margin-left: var(--space-1);
    padding: var(--space-2);
  }

  // Success badge
  .status-label.--success {
    background-color: var(--success-low);

    .status-label-indicator {
      background-color: var(--success);
    }

    .status-label-text {
      color: var(--success-hover);
    }
  }

  // Critical badge
  .status-label.--critical {
    background-color: var(--danger-low);

    .status-label-indicator {
      background-color: var(--danger);
    }

    .status-label-text {
      color: var(--danger-hover);
    }
  }

  // Inactive badge
  .status-label.--inactive {
    background-color: var(--primary-low);

    .status-label-indicator {
      background-color: var(--primary-high);
    }

    .status-label-text {
      color: var(--primary-high);
    }
  }
}

.d-admin-row__overview {
  &-name {
    font-weight: 700;
    max-width: 80%;
    margin-bottom: 0;
    color: var(--primary);
  }

  &-author {
    font-size: var(--font-down-1);
    margin-bottom: var(--space-1);
    color: var(--primary-high);
  }

  &-about {
    padding-right: var(--space-4);
    max-width: 75ch;

    @include viewport.until(md) {
      padding-top: var(--space-1);
    }

    .d-icon {
      font-size: var(--font-down-3);
      margin-bottom: 0.1em;
    }
  }

  &-flags {
    color: var(--primary-high);
    font-size: var(--font-down-1);
    text-transform: lowercase;

    &::first-letter {
      text-transform: uppercase;
    }
  }
}

a.d-admin-row__overview-name {
  color: var(--primary);

  &:visited {
    color: currentcolor;
  }

  &:hover,
  &:focus {
    color: var(--tertiary);
  }
}

.d-admin-row__controls {
  &-options {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    justify-content: flex-end;

    .fk-d-menu__trigger {
      font-size: var(--font-down-1);
    }
  }
}

.d-admin-row__mobile-label {
  display: none;

  @include viewport.until(md) {
    display: inline-flex;
    color: var(--primary-high);
  }
}