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

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap");

@layer components {
  /* Buttons */
  .buttonPrimary {
    @apply cursor-pointer flex justify-center items-center border gap-x-5 h-9 px-4 rounded-full text-white bg-orange-400 hover:bg-orange-500 disabled:bg-gray-200 disabled:text-gray-500 disabled:cursor-default font-bold text-sm transition-colors duration-200 ease-in-out outline-none border-none;
  }
  .buttonSecondary {
    @apply cursor-pointer flex justify-center items-center border gap-x-5 h-9 px-4 w-fit rounded-full border-orange-400 text-orange-400 bg-white hover:bg-orange-400 hover:text-white disabled:bg-white disabled:border-gray-200 disabled:text-gray-200 disabled:cursor-default font-bold text-sm transition-colors duration-200 ease-in-out outline-none text-nowrap;
  }
  .dangerButton {
    @apply flex justify-center items-center border gap-x-5 h-9 px-4 rounded-full text-white bg-red-500 hover:bg-orange-600 disabled:bg-gray-200 disabled:text-gray-500 disabled:cursor-default font-bold text-sm transition-colors duration-200 ease-in-out outline-none border-none;
  }
  .dangerButtonSecondary {
    @apply cursor-pointer flex justify-center items-center border gap-x-5 h-9 px-4 rounded-full border-red-500 text-red-500 hover:bg-red-500 hover:text-white font-bold text-sm transition-colors duration-200 ease-in-out outline-none;
  }

  /* Inputs */
  .input {
    @apply border border-orange-200 rounded-lg border-solid bg-orange-50 outline-none  text-sm placeholder:details1Regular placeholder:text-gray-400 w-full p-4   disabled:bg-gray-100 disabled:text-gray-500;
  }

  .comboBox {
    @apply w-full h-9 flex items-center px-4 py-3 rounded-lg bg-white border border-gray-200 outline-none details1Regular text-gray-400 gap-x-3;
  }

  .dropdown {
    @apply border outline-none border-gray-200 text-sm placeholder:details1Regular placeholder:text-gray-400 w-full px-4 py-5 rounded-md bg-gray-50 disabled:bg-gray-100 disabled:text-gray-500 h-9 hover:bg-gray-200 details1Regular flex justify-between items-center;
  }

  /* Text areas */
  .textarea {
    @apply text-gray-900 border bg-gray-50 outline-none border-gray-200 font-normal text-sm w-full px-4 py-3 rounded-md placeholder:text-sm placeholder:text-gray-400 active:border-blue-600 disabled:bg-gray-100 disabled:text-gray-500 resize-none;
  }

  /* Text  Headers */
  .heading1Regular {
    @apply text-[54px] leading-[64px];
  }
  .heading1Bold {
    @apply text-[54px] leading-[64px] font-bold;
  }
  .heading2Regular {
    @apply text-[42px] leading-[50px];
  }
  .heading2Bold {
    @apply text-[42px] leading-[50px] font-bold;
  }
  .heading3Regular {
    @apply text-[32px] leading-[40px];
  }
  .heading3Bold {
    @apply text-[32px] leading-[40px] font-bold;
  }
  .heading4Regular {
    @apply text-[28px] leading-[36px];
  }
  .heading4Bold {
    @apply text-[28px] leading-9 font-bold text-gray-900;
  }
  .heading5Regular {
    @apply text-[20px] leading-[28px];
  }
  .heading5Bold {
    @apply text-xl font-bold text-gray-900;
  }
  .heading6Regular {
    @apply text-base text-gray-900 font-normal;
  }
  .heading6Bold {
    @apply text-base font-bold text-gray-900;
  }
  .details1Regular {
    @apply text-sm font-normal text-gray-600;
  }
  .details1Bold {
    @apply text-sm font-bold text-gray-600;
  }
  .details2Regular {
    @apply text-[12px] leading-4 font-normal text-gray-900;
  }
  .details2Bold {
    @apply text-xs font-bold;
  }
  .link1Regular {
    @apply text-base font-normal underline;
  }
  .link2Regular {
    @apply text-sm font-normal underline;
  }
  .link3Regular {
    @apply text-xs font-normal underline;
  }
  .subtitle1Regular {
    @apply text-[10px] font-normal;
  }
  .subtitle2Body {
    @apply text-[10px] font-medium;
  }
  .linkSelected {
    @apply bg-gray-50 border-b-2 border-orange-400;
  }
}