@import "tailwindcss";
@plugin "@tailwindcss/typography";

@import "tippy.js/dist/tippy.css";
@import "tippy.js/themes/light.css";
@import "tom-select/dist/css/tom-select.css";
@import "highlight.js/styles/github-dark.css";

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

@theme {
  --font-sans: "Rubik", ui-sans-serif, system-ui, sans-serif;
}

@layer components {
  .ts-control {
    @apply !bg-white !text-slate-900 !text-sm !border !border-slate-300 !px-3 !py-2.5 !rounded-xl placeholder:text-slate-400;
  }

  .ts-dropdown {
    @apply !rounded-xl !p-2;

    .active {
      @apply !rounded-xl;
    }

    .option {
      @apply !text-sm !text-slate-900;
    }
  }

  .prose pre {
    background-color: #0d1117 !important;
  }

  .text {
    @apply text-sm;
  }

  .title {
    @apply text-2xl;
  }

  .login-form-container {
    @apply w-1/3 min-w-[300px] max-w-[500px];
  }

  .error-message {
    @apply text-sm text-red-500;
  }

  .button {
    @apply w-max px-4 py-2 text-center text-sm text-white cursor-pointer rounded-xl;

    &.primary {
      @apply bg-blue-400 hover:bg-blue-300 active:bg-blue-500;
    }

    &.secondary {
      @apply bg-gray-300 text-black hover:bg-gray-200 active:bg-gray-400;
    }
  }

  nav.pagy {
    @apply flex justify-end items-center gap-1 my-4;
  }

  nav.pagy a {
    @apply inline-flex justify-center items-center min-w-[2.5rem] h-10 px-2.5 text-sm border border-gray-300 rounded-xl cursor-pointer;
  }

  nav.pagy a:hover:not([aria-disabled="true"]) {
    @apply bg-gray-100 border-gray-400;
  }

  nav.pagy a[aria-current="page"] {
    @apply bg-blue-400 border-blue-400 text-white font-medium cursor-default;
  }

  nav.pagy a[aria-disabled="true"] {
    @apply cursor-not-allowed;
  }
}