@import 'tailwindcss';

/* utilities */
@import './utitlity/index.css';

/* theme */
@import './theme/index.css';

/* components */
@import './textstyles.css';

/* The theme variables */
@theme {
  /*
   * breakpoints
   */
  --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
  --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/

  /*
   * fonts
   */
  --font-inter: 'Inter', sans-serif;
  --font-space: 'Space Grotesk', sans-serif;
}

/* Styles that can be overwritten by utils */
@layer components {
  .btn-sm {
    @apply flex-row-1 items-center justify-center px-1.5 py-1 rounded-1.5 h-8 min-h-8;
  }

  .btn-md {
    @apply flex-row-2 items-center justify-center px-3 py-2 rounded-1.5 h-10 min-h-10;
  }

  .btn-lg {
    @apply flex-row-2 items-center justify-center px-4 py-2.5 rounded-1.5 h-12 min-h-12;
  }

  .icon-btn-xs {
    @apply flex-row-0 items-center justify-center p-1 rounded-1 h-6 min-h-6 w-6 min-w-6;
  }

  .icon-btn-sm {
    @apply flex-row-0 items-center justify-center p-1.5 rounded-1.5 h-8 min-h-8 w-8 min-w-8;
  }

  .icon-btn-md {
    @apply flex-row-0 items-center justify-center p-2 rounded-1.5 h-10 min-h-10 w-10 min-w-10;
  }

  .icon-btn-lg {
    @apply flex-row-0 items-center justify-center p-3 rounded-1.5 h-12 min-h-12 w-12 min-w-12;
  }

  .card-sm {
    @apply flex-col-2 bg-surface text-on-surface px-2 py-1 rounded;
  }

  .card-md {
    @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
  }

  .card-lg {
    @apply flex-col-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
  }

  .chip {
    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-md;
  }

  .chip-full {
    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-full;
  }

  .section-padding-x {
    @apply px-6 tablet:px-12 desktop:px-24;
  }

  .section-padding-y {
    @apply py-16;
  }

  .section-padding {
    @apply px-6 tablet:px-12 desktop:px-24 py-16;
  }
}

@layer components {
  * {
    @apply border-border;
  }

  html {
    @apply bg-background text-on-background;
  }

  button {
    @apply cursor-pointer text-nowrap;
  }

  input {
    @apply block;
  }

  *:disabled {
    @apply cursor-not-allowed;
  }

  *:focus {
    @apply outline-none ring-0;
  }

  *:focus-visible {
    @apply ring-2 ring-focus;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      @apply !transition-none !animate-none;
    }
  }

  table {
    @apply table-fixed border-separate border-spacing-0 bg-table-background text-table-text;
  }

  th {
    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-y-1 first:border-l-1 last:border-r-1 first:rounded-tl-lg last:rounded-tr-lg bg-table-header-background text-label font-bold;
  }

  tbody > tr {
    @apply hover:bg-table-row-hover-background;
  }

  td {
    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-1 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
  }

  tbody > tr:last-child > td {
    @apply first:rounded-bl-lg last:rounded-br-lg;
  }

  .table-resize-indicator {
    @apply absolute top-2 bottom-2 right-0;
  }

  th:last-child > .table-resize-indicator {
    @apply right-6;
  }
}