styles.scss

// Please take note of the order in which these are imported
@import 'tailwindcss/base.css' layer(tailwind-base);

@import 'primeicons/primeicons.css';

@import 'tailwindcss/components.css' layer(tailwind-utilities);
@import 'tailwindcss/utilities.css' layer(tailwind-utilities);

html {
  font-size: calc(14 / 16 * 1rem);
}

body {
  @apply bg-grey-100 font-body text-black;
  overflow-y: scroll; /* Always show scrollbars to avoid page skipping about */
}

:root {
  // primeng uses this variable on all of its components by default
  // and it does not work if we set it within the 'primeng' layer
  --font-family: theme(fontFamily.body);
}

@layer tailwind-base {
  h1 {
    @apply font-bold txt-h-1;
  }

  h2 {
    @apply font-bold txt-h-2;
  }

  h3 {
    @apply font-bold txt-h-3;
  }

  strong,
  b {
    @apply font-semibold;
  }

  p a,
  p .p-button-link {
    @apply text-blue-500;
    @apply underline;
  }
}

.mention-menu {
  @apply shadow-menu;

  li {
    .mention-item {
      @apply py-2 font-semibold text-black txt-body-m #{!important};
    }

    &.mention-active {
      @apply bg-purple-100;

      a {
        background: inherit !important;
      }
    }
  }
}

// PrimeNG Component overrides

// Rule-of-thumb: Override only from any specific component class-name(i.e. `.p-component-X`) 'down'.
// Following the pattern:
//
// .p-component-X {
//   .p-component-X-element {
//     // Override styles here
//   }
// }
//
// So there will only be ONE section/grouping per PrimeNG component.
//
@layer primeng-customisations {
  $toolbar-height: calc(48 / 14 * 1rem);

  .p-button {
    .p-button-label {
      @apply txt-system-bold-m;
    }

    &.p-button-sm {
      @apply txt-system-s;
    }

    &.p-button-link {
      @apply p-0;
    }
  }

  .p-card {
    @apply text-black;

    .p-card-title {
      @apply pb-2 pl-2 font-bold text-black txt-h-2;
    }
  }

  .p-drawer {
    color: inherit;

    .p-drawer-header {
      @apply pl-3;
      height: $toolbar-height - 2;

      .p-drawer-icon {
        margin-inline-start: 0;
        height: 33px;
        width: 33px;
      }
    }

    .p-drawer-content {
      padding-inline-start: 0;
      padding-inline-end: 0;
    }
  }

  .p-toolbar {
    @apply rounded-none border-x-0 border-t-0 border-b-purple bg-navy py-0;
    height: $toolbar-height;
    flex-wrap: nowrap !important;

    .p-toolbar-group-start {
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .p-datatable {
    // Apply these styles ONLY when the table is INSIDE a Card
    .p-card & {
      .p-datatable-header {
        @apply px-0 pb-4 pt-0;
      }

      .p-paginator {
        @apply border-b-0 pb-0 pt-4;

        .p-paginator-current {
          @apply me-auto ms-0 ps-0 txt-system-s;
        }
      }
    }

    .p-datatable-thead > tr > th {
      @apply bg-grey-50 text-black;
    }

    .p-datatable-sortable-column {
      &:not(.p-datatable-column-sorted),
      &.p-datatable-column-sorted {
        @apply bg-grey-50 text-black;

        &:hover,
        &:focus-within {
          @apply bg-purple-100 text-purple-700;
        }
      }

      &.p-datatable-column-sorted {
        .p-sortable-column-icon {
          @apply text-purple-700;
        }
      }
    }

    // Styling for the filter button when active
    // Currently broken: /~https://github.com/primefaces/primeng/issues/16576
    // .p-datatable-column-filter-button.p-column-filter-menu-button-active,
    // .p-datatable-column-filter-button.p-column-filter-menu-button-active:hover,
    // .p-datatable-column-filter-button.p-column-filter-menu-button-active:focus {
    //   @apply bg-purple-100 text-purple-700;
    // }
  }

  .p-chip .p-chip-label {
    @apply font-semibold txt-body-m;
  }

  // All form-inputs should be full-width, a wrapper should be in control of the width.
  .p-password,
  .p-select,
  .p-multiselect {
    @apply w-full;

    .p-select-overlay,
    .p-multiselect-overlay {
      @apply max-w-full;
    }

    .p-paginator & {
      @apply w-auto;
    }
  }

  .p-password {
    .p-password-input {
      @apply font-mono; // Improve readability and spot typos between similar characters (o,O,0 or i,l,L,1 etc.)
    }
  }

  .p-multiselect {
    // Prevent contents being cut off, always wrap and align checkboxes to the top
    .p-multiselect-item {
      @apply items-start text-wrap;
    }
  }
  // To be able to remove this rule we need to be able to mark all form fields as "dirty" instead of "touched" on form submit
  // Waiting for this to be merged & released in angular: /~https://github.com/angular/angular/pull/58663#issuecomment-2476844180
  .p-inputwrapper,
  .p-textarea,
  .p-checkbox-box,
  .p-inputtext {
    &.ng-touched.ng-invalid,
    [formcontrolname].ng-touched.ng-invalid & {
      border-color: theme('colors.red.500') !important;
    }
  }

  .p-contextmenu,
  .p-menu {
    @apply w-auto;

    .p-menuitem-text {
      @apply whitespace-nowrap;
    }
  }

  .p-fileupload.p-fileupload-advanced {
    @apply rounded-[16px] border border-dashed border-grey-500;

    .ng-touched.ng-invalid & {
      @apply border-red-500;
    }

    .p-fileupload-header,
    p-progressbar {
      display: none;
    }

    .p-fileupload-filename,
    .p-fileupload-filename + div {
      @apply txt-system-s;
    }

    .p-fileupload-filename ~ * {
      @apply grow-0;
    }
  }

  .p-progress-spinner-svg .p-progress-spinner-circle {
    @apply stroke-purple-700 #{!important};
  }

  .p-toast {
    .p-toast-close-button {
      @apply text-grey-700;
    }
  }
}