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

/*

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-200;
  }
}

*/

@layer base {
  @font-face {
    font-family: "Raleway";
    src: url(/assets/raleway-regular-e47a2d8159220989208ef4160b7e5278c91c7de22a60a05d9f3e5e8e3f2f3994.ttf) format("truetype");
    font-weight: 400;
  }
  @font-face {
    font-family: "Raleway";
    src: url(/assets/raleway-medium-5337bbaf50a825c1818130418694044b63cdb334401010d0cc7262711f05e327.ttf) format("truetype");
    font-weight: 500;
  }
  @font-face {
    font-family: "Raleway";
    src: url(/assets/raleway-bold-60a52be58a491e3922af7c8e5f16cfc9ba886270bbd579cb763ac1a6836f2d5c.ttf) format("truetype");
    font-weight: 700;
  }
  @font-face {
    font-family: "Roboto";
    src: url(/assets/roboto-regular-20000d75440612ea9275ebd2723e3fa8730d6bbfd445ed31bad745bec6164d8b.ttf) format("truetype");
    font-weight: 400;
  }
  @font-face {
    font-family: "Roboto";
    src: url(/assets/roboto-medium-6dd38ee27a77b8ce1172b15c8fa10ea0e588a54505741f5d397ebf466c199fa6.ttf) format("truetype");
    font-weight: 500;
  }
  @font-face {
    font-family: "Roboto";
    src: url(/assets/roboto-bold-b0786970a4e751b8f1794254733040ecbfaa7cc2ef8fa7f4eab4769bc98303e9.ttf) format("truetype");
    font-weight: 700;
  }
  html {
    font-family: "Roboto", sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
  }
  input::placeholder {
    color: #9BA3B6;
  }
  /* width */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f2f2f2;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #9BA3B6;
    border-radius: 50px;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active{
      -webkit-box-shadow: 0 0 0 30px #062063 inset !important;
      -webkit-text-fill-color: white;
  }
}

@layer components {
  .btn-disabled {
    @apply disabled:border-base-grey-300 disabled:bg-base-grey-200 disabled:text-[#c4c4c4];
  }
  .btn-disabled-blue {
    @apply disabled:border-primary-blue disabled:bg-base-grey-400 disabled:text-primary-blue opacity-90;
  }
  .nav-item-shadow {
    @apply shadow-[4px_2px_6px_0_rgb(0,0,0,0.16)];
  }
}

@layer utilities {
  .pagination {
    @apply inline-flex items-center;

    li {
      @apply flex text-sm text-center text-primary-blue;
    }

    .page {
      @apply flex items-center justify-center w-8 h-8 border cursor-pointer border-base-grey-300;
    }

    .active .page {
      @apply text-white bg-primary-blue;
    }
  }
}

.sortable::after {
  content: " ▲▼"; /* Add both carets with a space in between */
  font-size: 0.8em; /* Adjust size if needed */
  opacity: 0.5; /* Slightly transparent by default */
  margin-left: 5px; /* Space between the link and carets */
  display: inline;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */