@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --color-brand: 43 24 39;
  }
  html,
  body {
    @apply antialiased bg-body font-body dark:bg-dark dark:text-white;
  }
  .dynamic-html h6 {
    @apply font-medium uppercase;
  }
  .dynamic-html p {
    @apply mb-3;
  }
}

@layer utilities {
  .text-case-inherit {
    text-transform: inherit;
  }
  .letter-space-inherit {
    letter-spacing: inherit;
  }
  .word-break-all {
    word-break: break-all;
  }
  .animation-delay-200 {
    animation-delay: 200ms;
  }
  .animation-delay-500 {
    animation-delay: 500ms;
  }
  .animation-delay-700 {
    animation-delay: 700ms;
  }
  .text-vertical {
    writing-mode: tb;
    text-orientation: upright;
  }
}

/* Hide spin button for input type number */
input.spin-button-hidden::-webkit-outer-spin-button,
input.spin-button-hidden::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
} */

/*================================================================
Styles for Swiper slider
================================================================*/
.swiper {
  @apply flex flex-col;
}

.swiper-wrapper {
  @apply order-first;
}

.swiper-scrollbar {
  @apply relative bg-gray-200 rounded dark:bg-gray-600;
}

.swiper-horizontal > .swiper-scrollbar {
  @apply z-10 mt-4 mb-0 h-0.5 w-full sm:mt-6;
}

.swiper-vertical > .swiper-scrollbar {
  @apply absolute top-0 right-1 z-10 h-full w-0.5;
}

.swiper-scrollbar-drag {
  @apply relative bg-gray-900 rounded dark:bg-light-dark;
}

.swiper-horizontal .swiper-scrollbar-drag {
  @apply top-[-1px] left-0 h-[3px] w-full shadow-sm;
}

.swiper-vertical .swiper-scrollbar-drag {
  @apply left-[-1px] top-0 h-full w-[3px] shadow-sm;
}

.swiper-scrollbar-cursor-drag {
  @apply cursor-move;
}

.swiper-scrollbar-lock {
  @apply hidden;
}

.transaction-table {
  border-spacing: 0 12px;
  margin-top: -12px;
}
.transaction-table > thead tr > th {
  text-align: left;
}
.text-heading-style {
  @apply text-sm font-medium tracking-wider;
}

/* React Share button custom styles */
.product-share .react-share__ShareButton {
  @apply flex flex-col items-center justify-center;
}
