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

:root {
  --primaryScrollBarThumb: #29788e;
  --primaryScrollBarTrack: #001023;
  --dp-font-family: "Red Hat Display", Arial,
}

@font-face {
  font-family: 'text-security';
  src: url('../fonts/text-security-disc-compat.woff2') format('woff2');
  font-display: swap;
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* tooltip-styles */
[data-tippy-root] .tippy-box {
  /* @apply bg-blue-700 dark:bg-blue-500 text-white */
}

[data-tippy-root] .tippy-box[data-placement^="top"] > .tippy-arrow::before {
  /* @apply border-t-blue-700 dark:border-t-blue-500 */
}

[data-tippy-root] .tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
  /* @apply border-b-blue-700 dark:border-b-blue-500 */
}

[data-tippy-root] .tippy-box[data-placement^="left"] > .tippy-arrow::before {
  /* @apply border-l-blue-700 dark:border-l-blue-500 */
}

[data-tippy-root] .tippy-box[data-placement^="right"] > .tippy-arrow::before {
  /* @apply border-r-blue-700 dark:border-r-blue-500 */
}


.tippy-box {
  /* @apply !bg-white !p-0 !rounded-12 !shadow-1 !text-black-900 */
  @apply !bg-transparent !p-0 !text-current
  /* background-color: white; */
  /* padding: 0px; */
  /* border-radius: 12px; */
  /* box-shadow: 0px 12px 28px rgba(26, 35, 59, 0.28), inset 0px 0px 0px 0.5px #C0C3C8; */
}
.tippy-content {
  @apply !p-0
}

.vue-toast-notification,
.Vue-Toastification__container,
.toast {
  z-index: 10002 !important;
}

/* notification-styles */
body .Vue-Toastification__toast {
  @apply min-h-48 px-40 py-12 rounded-12
}

body .Vue-Toastification__toast--error {
  @apply bg-semantic-error
}

body .Vue-Toastification__toast--success {
  @apply bg-semantic-success
}

body .Vue-Toastification__icon {
  @apply mr-8 my-0
}

body .Vue-Toastification__toast-body {
  @apply text-14 font-500
}

body .Vue-Toastification__close-button {
  @apply leading-[20px] h-20
}


/* calendar-styles */
body .vc-pane,
body .vc-weeks {
  /* @apply min-w-0; */
}

body .vc-container {
  @apply border-none bg-transparent;
}

body .vc-title {
  @apply text-h5;
}

body .vc-weekday {
  @apply text-tiny text-black-600;
}

body .vc-day-content {
  @apply text-body-2;
}

body .vc-highlights + .vc-day-content {
  /* @apply !text-white; */
}

body .vc-focusable {
  /* @apply bg-primary-background */
}

body .vc-highlights {
  /* @apply bg-primary-background */
}

body .vc-highlight {
  /* @apply !bg-primary-background */
  @apply !bg-black-900 !font-500
}

body .vc-highlight-base-middle {
  @apply !bg-black-100
}

body .vc-highlight-base-start {
  /* @apply !bg-primary-background */
}

body .vc-highlight-content-outline {
  @apply text-white
}

/* otp-input-styles */
.otp-input {
  text-align: center;
}

/* swiper-styles */
.swiper {
  /* @apply !overflow-visible; */
}
.swiper-wrapper {
  /* @apply !overflow-hidden; */
}
.swiper-pagination-bullets {
  @apply !relative !bottom-0 mt-20 leading-[100%];
}
.swiper-pagination-bullet {
  @apply !bg-white !border-2 !border-black-900 !w-14 !h-14 !mx-6 !opacity-100 !border-opacity-60
}
.swiper-pagination-bullet-active {
  @apply !bg-primary-background !border-primary-background
}

/* scroll-smooth for anchors */
html {
  @apply scroll-smooth
}
.swiper-button-prev,
.swiper-button-next {
  /* @apply !text-blue-700 dark:!text-blue-500 */
}
.swiper-button-next {
  /* @apply !right-auto !left-full ml-10; */
} 
.swiper-button-prev {
  /* @apply !left-auto !right-full mr-10; */
}

/* scroll-smooth for anchors */
html {
  @apply scroll-smooth
}

/* TODO: fix to tailwind */
/* decor-dot-style */
.decor-dot {
  position: relative;
  padding: 0 0 0 15px;
}

.decor-dot:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 4px;
  /* @apply bg-blue-700; */
  border-radius: 50%;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

.rightOverlay::before {
  content: "";
  position: absolute;
  right: -5px;
  height: 40px;
  z-index: 10;
  width: 25px;
  background: linear-gradient(270deg, #FFFFFF 42.31%, rgba(255, 255, 255, 0) 100%);
}

.leftOverlay::after {
  content: "";
  position: absolute;
  left: -5px;
  height: 40px;
  z-index: 10;
  width: 25px;
  background: linear-gradient(270deg, #FFFFFF 42.31%, rgba(255, 255, 255, 0) 100%);
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

body .dark .decor-dot:before {
  background-color: #3C4699;
}

@layer components {
  .start-animate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .infinite-animate {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
}

@layer base {
  :root {
    --color-primary: 60 70 153;
  }
  :root[class="dark"] {
    --color-primary: 60 70 153;
  }

  /* .primary-saffron{ */
    /* @apply  */
  /* } */

  /* scroll-style */
  * {
    scrollbar-color: #FF5252 #fff;
    scrollbar-width: thin;
    @apply outline-none;
  }

  .dark,
  .dark * {
    scrollbar-color: #FF5252 #1E2024;
  }

  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
  }

  *::-webkit-scrollbar-track {
    background: #fff;
  }

  .dark::-webkit-scrollbar-track,
  .dark *::-webkit-scrollbar-track {
    background: #1E2024;
  }

  *::-webkit-scrollbar-thumb {
    background: #FF5252;
  }

  .dark::-webkit-scrollbar-thumb,
  .dark *::-webkit-scrollbar-thumb {
    background: #FF5252;
  }

  .textarea a {
    /* @apply text-blue-700 dark:text-blue-500; */
  }

  .text-link,
  a {
    @apply text-primary-red-dark underline hover:no-underline cursor-pointer;
  }
  
  select {
    @apply appearance-none bg-transparent cursor-pointer;
    font: inherit;
  }
  
  textarea,
  input {
    font: inherit;
    @apply bg-transparent;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-transition: 'color 9999s ease-out, background-color 9999s ease-out';
    -webkit-transition-delay: 9999s;
  }

  select,
  textarea,
  input {
    /* @apply placeholder-gray-700 */
  }

  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  body, html {
    scrollbar-gutter: stable;
  }

  body {
    @apply font-redhat bg-primary-background text-body-1 text-black-900
  }

  .text-h1 {
    @apply text-26 md:text-28 font-700
  }
  .text-h2 {
    @apply text-19 md:text-20 font-700
  }
  .text-h3 {
    @apply text-17 font-650
  }
  .text-h4 {
    @apply text-17 font-500
  }
  .text-h5 {
    @apply text-15 font-700
  }
  .text-subtle {
    @apply text-16 font-600
  }
  .text-body-1 {
    /* @apply text-15 font-500 */
    @apply text-14 font-500
  }
  .text-body-2 {
    @apply text-13 font-500
  }
  .text-tiny {
    @apply text-11 font-500
  }
  .text-button-1 {
    /* @apply text-15/24 font-650 */
    @apply text-14 font-650
  }
  .text-button-2 {
    @apply text-12 font-650
  }
  .text-label {
    @apply text-13 font-500
  }
}