@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@theme {
  --font-primary: 'Roboto', sans-serif;
  /* --font-grold: 'Grold Rounded', sans-serif; */
  --disabled-alpha: 0.57;
}

/* TODOS: 
  - revisit switch to use tailwind more
  - fix disabled styles on input fields with icon
  - [x] login page (I think @ilovas is working on it(?)) - @harisadam taking this. 
  - tooltip on c-status
  - selected row in the table
  - tooltip with image on the table first cell on mouseover (TODO @harisadam)
  - [x] double button lista/kartya
  - make focus highlight global
  - navigation (TODO @harisadam)
  - ... navigation dropdown (TODO @harisadam)
  - dialog (TODO @harisadam)
  - drawer (TODO @harisadam)
  - image gallery (TODO @harisadam)
  - print view (TODO @harisadam)
*/

@layer base {
  body {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-bodyCopy);
    font-family: 'Roboto', sans-serif;
  }


  .icon {
    @apply inline-block flex-shrink-0 relative align-middle w-[1em] h-[1em] leading-[1];
  }

  .c-sort__button {

  }

  .c-sort__button--active {
    @apply text-violet-500;
  }

  .c-filter__button {

  }

  .c-filter__button--active {
    @apply text-violet-500;
  }
}