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

@layer base {
    html {
      font-family: "Poppins", sans-serif;
      background-color: #0c0123 !important;
      overflow: hidden;
      position: fixed;
    }
    body {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
    }
  }

  @layer components {
    .custom-font-xs { /* 12px */
      @apply text-xs sm:text-sm md:text-base
    }
    .custom-font-sm { /* 14px */
      @apply text-sm sm:text-base md:text-base
    }
    .custom-font-base { /* 16px */
      @apply text-base sm:text-lg md:text-xl lg:text-2xl
    }
    .custom-font-lg { /* 18px */
      @apply text-lg sm:text-xl md:text-2xl
    }
    .custom-font-xl { /* 20px */
      @apply text-xl sm:text-2xl md:text-3xl
    }
    .custom-font-2xl { /* 24px */
      @apply text-2xl sm:text-3xl md:text-4xl
    }
    .custom-font-3xl { /* 30px */
      @apply text-3xl sm:text-4xl md:text-5xl
    }
    .custom-font-4xl { /* 36px */
      @apply text-4xl sm:text-5xl md:text-6xl
    }
    .custom-font-5xl { /* 48px */
      @apply text-5xl sm:text-6xl md:text-7xl
    }
    .custom-font-6xl { /* 60px */
      @apply text-6xl sm:text-7xl
    }
    .custom-header-1-font { /* 28px */
      @apply text-[28px] sm:text-[32px] md:text-[36px] lg:text-[40px]
    }
    .custom-header-2-font { /* 38px */
      @apply text-[38px] sm:text-[42px] md:text-[46px] lg:text-[50px]
    }
    .login-input {
      @apply text-gray-light-2 custom-font-sm w-full !h-12 sm:!h-16 pl-4 !rounded font-light !bg-[#F9F4FF] mb-3 focus:outline-none
    }
    .text-input {
      @apply input custom-font-xs xl:text-xs font-light text-gray-500 w-full rounded-sm bg-opacity-[0.45] mb-3 focus:outline-none
    }
    /* Buttons */
    .pink-button-md {
      @apply bg-pink-600 mr-2 custom-font-sm rounded normal-case w-44 h-12 sm:h-[4rem] text-white hover:bg-transparent hover:border-pink-600 hover:border hover:bg-opacity-25 hover:text-pink-600
    }
    .disabled-button-md {
      @apply bg-pink-900 rounded custom-font-sm normal-case font-bold w-44 h-12 sm:h-[4rem] text-white focus:text-white cursor-not-allowed opacity-25
    }
    .select-input {
      @apply h-full rounded border-transparent bg-transparent py-0 pl-2 text-sm text-gray-500 focus:outline-none sm:text-sm w-full
    }
    /* Single use */
    .code-digit {
      @apply m-2 custom-font-3xl font-bold border-b-2 md:border-b-[0.2vw] focus:border-white border-pink-600 outline-0 focus:text-white focus:appearance-none text-pink-600 h-[12vw] w-[12vw] md:h-[6vw] md:w-[5vw] lg:w-[7vw] xl:w-[5vw] text-center form-control bg-transparent;
    }
    .bottom-bar {
      @apply btm-nav grid grid-cols-4 py-3 fixed bottom-0 left-0 right-0 bg-white shadow-[0_-10px_30px_-10px_rgba(0,0,0,0.8)] divide-slate-400/50 rounded-t-[26px]
    }
    .dashboard-actions {
      @apply flex flex-row items-center justify-center h-10 w-[60px] sm:h-11 sm:w-[70px] rounded-lg text-white border-0 bg-custom-pink custom-font-2xl md:custom-font-xl
    }
    .input-file {
      @apply custom-font-xs sm:pl-7 w-full font-light file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:border-[#F4178B] file:custom-font-xs file:text-[#F4178B] file:font-light
    }
    .search-dropdown {
      @apply absolute w-full z-50 bg-white border border-gray-300 mt-1 overflow-hidden overflow-y-scroll rounded-md shadow-md text-black
    }
    .general-input {
      @apply input custom-font-sm w-full max-w-xs rounded-sm text-white bg-[#6F4397] bg-opacity-[0.45] mb-3 focus:outline-none
    }
    .info-details-input {
      @apply input-sm input custom-font-xs w-full max-w-xs focus:outline-none rounded-none pl-0 border-0 border-b-2
    }
    .bottom-menu {
      @apply btm-nav py-3 fixed bottom-0 left-0 right-0 bg-[#6F4397]
    }
    .radio-group {
      @apply flex justify-center py-1 space-x-2 bg-violet-light p-0 bg-opacity-10 border-violet-light font-medium custom-font-xs rounded-lg
    }
    .info-details-save-btn {
      @apply flex justify-center items-center font-bold btn-sm sm:btn-lg xl:text-sm xl:btn-md border-none w-auto custom-font-xs text-white rounded-md !bg-[#F4178B] focus:outline-none hover:bg-pink-400 normal-case m-auto
    }
    .disabled-info-details-save-btn {
      @apply flex justify-center items-center btn-sm sm:btn-lg xl:text-xs xl:btn-md border-none font-bold w-auto custom-font-xs text-white rounded-md bg-[#F4178B] focus:outline-none hover:bg-pink-400 normal-case cursor-not-allowed opacity-30 m-auto
    }
    .outlined-info-details-save-btn {
      @apply flex justify-center items-center btn-sm sm:btn-lg xl:text-sm xl:btn-md border-2 font-bold text-[#F4178B] border-[#F4178B] w-auto custom-font-xs rounded-md bg-white focus:outline-none hover:bg-white normal-case m-auto
    }
    .disabled-outlined-info-details-save-btn {
      @apply flex justify-center items-center border-[#F4178B] font-bold btn-sm sm:btn-lg xl:text-xs xl:btn-md border-2 opacity-30 w-auto custom-font-xs text-pink-400 rounded-md bg-white focus:outline-none hover:bg-white normal-case cursor-not-allowed m-auto
    }
    .scrolling-details {
      @apply xl:overflow-y-scroll xl:max-h-[19vh] xl:ml-10 xl:mr-8  xl:pl-10 scroll-smooth no-scrollbar
    }
    .tab-icon {
      @apply absolute pl-[4rem] pb-[4rem] sm:ml-[3rem] md:ml-[6rem] sm:-top-3 md:-top-4
    }
    .tab-percentage {
      @apply absolute text-pink-600 custom-font-xs font-light right-[0.3em] bottom-[0.01em]
    }
    .tab-selected {
      @apply bg-pink-600 bg-opacity-25
    }
    .tab-unselected {
      @apply bg-violet-light bg-opacity-20 border-pink-600
    }
    .tab-base {
      @apply relative text-violet-neutral custom-font-xs text-center font-medium h-[5rem] sm:h-[8rem] rounded-lg
    }
    .single-tab {
      @apply flex h-full items-center justify-center
    }
    .upload-button {
      @apply p-1.5 sm:p-2 md:p-3 text-white bg-[#F4178B] border-0 rounded-full focus:bg-[#F4178B] focus:text-white focus:border-0
    }
    .top-bar {
      @apply text-violet-light py-7 sm:py-8 top-0 flex flex-row justify-between fixed z-50 w-full xl:relative px-[10vw] sm:px-[10vw] xl:px-[calc(50%-20vw)]
    }
    .top-bar-login {
      @apply text-violet-light opacity-80 py-5 sm:py-8 px-6 flex flex-row justify-between z-50 w-full
    }
    /* Dashboard */
    .details-button-row {
      @apply flex flex-row justify-evenly items-center sm:w-full sm:space-x-1 lg:space-x-2
    }
    .base-dashboard-button {
      @apply flex px-1 rounded-md !bg-opacity-10 h-[20rem] sm:h-[21rem] lg:h-[15rem] lg:py-2 lg:px-4 lg:mx-7
    }
    .top-dashboard-button {
      @apply flex justify-between px-2 py-4 lg:py-1
    }
    .base-completed-button {
      @apply cursor-pointer flex flex-row justify-center custom-font-xs lg:text-xs font-light sm:my-2 lg:my-1
    }
    .content-completed-button {
      @apply flex space-x-2 items-center bg-green-300 rounded text-green-300 px-2 bg-opacity-10
    }
    .base-action-button {
      @apply cursor-pointer flex flex-row justify-center lg:mt-2 items-center custom-font-xs lg:text-xs text-red-500 font-light
    }
    .content-action-button {
      @apply flex space-x-1 items-center bg-red-600 p-1 rounded bg-opacity-20
    }
    .tab-details {
      @apply custom-font-sm font-light px-2 h-10 sm:h-14 xl:h-12 text-black
    }
    .collapse-base {
      @apply rounded-md custom-font-xs xl:text-sm font-normal flex flex-row items-center text-[#6F6F6F]
    }
    .cancel-btn:hover {
      @apply bg-pink-600 text-white border-pink-600
    }
    .delete-btn:hover {
      @apply border-pink-600 bg-transparent text-pink-600
    }
    /* Scrolling buttons/container for desktop */
    .scrolling-area {
      @apply xl:flex flex-row items-center justify-center w-full space-x-5 hidden
    }
    .verified-phone {
      @apply absolute text-green-400 custom-font-xl bottom-[1.7rem] right-[1rem] sm:bottom-[2rem] md:bottom-[1.8rem] lg:bottom-[1.9rem]
    }
    .scrolling-employment {
      @apply space-y-3 px-3.5 custom-scrollbar overflow-y-auto max-h-[48vh] smallDevice:max-h-[45vh] sm:max-h-[calc(50vh-70px)] md:max-h-[calc((50vh-10vw)-70px)] lg:max-h-[calc((62vh-19vw)-70px)] xl:max-h-[calc((57vh-10vw)-70px)] scroll-smooth
    }
    .notification-badge {
      @apply absolute -top-[5px] -right-[5px] wide:landscape:-right-[12px] wide:landscape:-top-[10px] md:-top-[10px] md:-right-[12px] xl:-top-2.5 xl:-right-[12px] flex justify-center items-center
    }
}

@layer utilities {
  @variants responsive {
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Chrome, Edge, and Safari */
    .custom-scrollbar::-webkit-scrollbar {
      width: 5px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #D3D3D3;
      border-radius: 5px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #808080;
      border-radius: 14px;
      border: 3px solid #808080;
    }
    .custom-input-style {
      box-shadow: inset 3px 1px 2.5px 2.6px rgb(0 0 0 / 5%);
      -webkit-appearance: none;
    }
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number][disabled] {
  background: #D3D3D3;
  color:gray;
  border: none;
}
input[type="text"][disabled] {
  background: #D3D3D3;
  color:gray;
  border: none;
}