zitadel/console/src/styles/table.scss

@use 'sass:map';

@mixin table-theme($theme) {
  $primary: map.get($theme, primary);
  $primary-color: map.get($primary, 500);
  $is-dark-theme: map.get($theme, is-dark);
  $foreground: map.get($theme, foreground);
  $background: map.get($theme, background);

  .mat-mdc-table,
  .mat-mdc-paginator {
    background-color: inherit !important;
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .table-wrapper {
    overflow: auto;

    .table,
    .paginator {
      width: 100%;
    }
  }

  th {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    white-space: nowrap;

    &.mat-mdc-header-cell {
      color: map.get($foreground, text);
      font-size: 11px;
      font-weight: 500;
    }
  }

  .pointer {
    cursor: pointer;
  }

  tr {
    &.mat-mdc-header-row {
      height: 40px !important;
      padding-bottom: 4px;
    }

    &.highlight {
      &:hover {
        td {
          transition: background 0.1s ease;
          background: map.get($background, hover);
        }
      }
    }

    .cnsl-table-action {
      visibility: hidden;
      transition: color 0.2s ease;

      &:active,
      &:hover,
      &:focus,
      &:focus-within {
        visibility: visible;
      }
    }

    &:hover {
      .cnsl-table-action {
        visibility: visible;
      }
    }
  }

  th,
  td {
    padding: 0 0.5rem !important;
  }

  .mat-calendar-table-header tr th {
    height: 14px;
  }

  td .mat-mdc-checkbox,
  th .mat-checkbox {
    margin-left: 1rem;
  }

  .no-content-row {
    background-color: if($is-dark-theme, #ffffff10, #f4f4f470);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    font-size: 14px;
    justify-content: center;
    font-style: italic;
  }

  .selection {
    width: 80px;
    max-width: 80px;

    .checkbox {
      margin-right: auto;
    }

    .hidden {
      visibility: hidden;
    }
  }

  th .selection {
    margin-left: 1rem;
  }

  .state {
    border-radius: 50vw;
    padding: 2px 0.5rem;
    letter-spacing: 0.05em;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    background-color: if($is-dark-theme, map.get($background, state), #e4e7e4);
    box-shadow: 0 0 3px #0000001a;

    &.active {
      background-color: if($is-dark-theme, map.get($background, state-active), #cbf4c9);
      color: if($is-dark-theme, #cbf4c9, #0e6245);
    }

    &.inactive {
      color: if($is-dark-theme, #ffc1c1, #620e0e);
      background-color: if($is-dark-theme, map.get($background, state-inactive), #ffc1c1);
    }

    &.neutral {
      background: if($is-dark-theme, #01489c78, #47a8ff82);
      color: if($is-dark-theme, #47a8ff, #01489c);
    }
  }

  .bg-state {
    background-color: if($is-dark-theme, map.get($background, state), #e4e7e4) !important;

    &.active {
      background-color: if($is-dark-theme, map.get($background, state-active), #cbf4c9) !important;
      color: if($is-dark-theme, #cbf4c9, #0e6245) !important;
    }

    &.inactive {
      color: if($is-dark-theme, #ffc1c1, #620e0e) !important;
      background-color: if($is-dark-theme, map.get($background, state-inactive), #ffc1c1) !important;
    }
  }

  .color-shadow {
    border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
    box-shadow: 0 0 3px #0000001a;
  }
}