tailwind.base.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* PLEASE NOTE: all Tailwind components should be prefixed by `gn-ui` */
@layer components {
  /* TODO: add prefix */
  .card-shadow {
    @apply shadow-xl hover:shadow-xl-hover transition-shadow;
  }

  /* ICON CLASSES */
  .gn-ui-icon-small {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
  .gn-ui-icon-medium {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }

  /* LINK CLASSES */
  .gn-ui-link {
    @apply text-blue-600 hover:text-blue-700 hover:underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }
  .gn-ui-link-external-icon {
    content: 'open_in_new';
    font-family: 'Material Symbols Outlined';
    font-size: 0.9em;
    display: inline-block;
    vertical-align: top;
    padding-top: 0.1em;
  }
  .gn-ui-link-external {
    @apply gn-ui-link;
  }
  .gn-ui-link-external::before {
    @apply gn-ui-link-external-icon;
    padding-right: 0.2em;
  }
  .gn-ui-link-external-after {
    @apply gn-ui-link;
  }
  .gn-ui-link-external-after::after {
    @apply gn-ui-link-external-icon;
    padding-left: 0.2em;
  }

  /* BUTTON CLASSES */
  /* these are used behind the scenes by the `gn-ui-button` component */

  /* this is a base class, do not use it directly */
  .gn-ui-btn {
    --rounded: var(--gn-ui-button-rounded, 0.25em);
    --padding: var(--gn-ui-button-padding, 1em);
    --width: var(--gn-ui-button-width, auto);
    --height: var(--gn-ui-button-height, auto);
    --background: var(--gn-ui-button-background, --color-background);
    --font-size: var(--gn-ui-button-font-size, 1em);
    @apply flex flex-row items-center justify-center
      text-[length:--font-size] leading-none
      p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
      bg-[--background] transition-all duration-100
      focus:outline-none
      disabled:opacity-50 disabled:pointer-events-none;
  }
  /* makes sure icons will not make the buttons grow vertically */
  .gn-ui-btn mat-icon.mat-icon {
    margin-top: -0.325em;
    margin-bottom: -0.325em;
    flex-shrink: 0;
  }
  /* makes spinners appear in the right color */
  .gn-ui-btn mat-spinner circle {
    stroke: currentColor !important;
  }

  .gn-ui-btn-default {
    @apply gn-ui-btn text-white
      bg-gray-700 hover:bg-gray-800 active:bg-gray-900
      border border-gray-700 focus:ring-4 focus:ring-gray-200;
  }

  .gn-ui-btn-primary {
    @apply gn-ui-btn text-white
      bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
      border border-primary focus:ring-4 focus:ring-primary-lightest;
  }

  .gn-ui-btn-secondary {
    @apply gn-ui-btn text-white
      bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
      border border-secondary focus:ring-4 focus:ring-secondary-lightest;
  }

  .gn-ui-btn-outline {
    @apply gn-ui-btn text-main
    hover:text-primary-darker focus:text-primary-darker active:text-primary-black
    border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
  }

  .gn-ui-btn-light {
    @apply gn-ui-btn text-main
      hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
      border border-white focus:ring-4 focus:ring-gray-300;
  }

  /* BADGE CLASS */
  .gn-ui-badge {
    --rounded: var(--gn-ui-badge-rounded, 0.25em);
    --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
    --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
    --background-color: var(--gn-ui-badge-background-color, black);
    @apply inline-block opacity-70 p-[--padding] rounded-[--rounded]
      font-medium text-[length:0.875em] leading-none text-[color:--text-color] bg-[color:--background-color];
  }
  /* makes sure icons will not make the badges grow vertically; also make size proportional */
  .gn-ui-badge mat-icon.mat-icon {
    margin-top: -0.325em;
    margin-bottom: -0.325em;
    flex-shrink: 0;
    vertical-align: middle;
    font-size: 1.4em;
    width: 1em;
    height: 1em;
  }

  /* TODO: replace by gn-ui-badge class above */
  .badge-btn {
    @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
  }

  /* TODO: add prefix */
  .card-icon {
    @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
  }
}

html {
  --mdc-typography-font-family: var(--font-family-main);
}