@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap');

/*

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

*/
/*
 * 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.
 *


 */
@media (prefers-color-scheme: dark) {
  .theme-color {
    background-color: #27272a; /* zinc-800 */
    color: #ffffff80;
  }
}
@media (prefers-color-scheme: light) {
  .theme-color {
    background-color: #ffffff;
    color: #71717a; /* zinc-500 */
  }
}

/* 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 */
}

/* https://github.com/hotwired/turbo/pull/386 */
button .show-when-disabled {
  display: none;
}
button[disabled] .show-when-disabled {
  display: initial;
}

button .show-when-enabled {
  display: initial;
}
button[disabled] .show-when-enabled {
  display: none;
}

.turbo-progress-bar,
.turbolinks-progress-bar {
  background-color: #3b82f6;
}

/* Popper js - tooltip styling */
#tooltip {
  padding: 4px;
  font-size: 12px;
  display: none;
}
#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
#tooltip[data-popper-placement^="top"] > #arrow {
  bottom: -4px;
}

#tooltip[data-popper-placement^="bottom"] > #arrow {
  top: -4px;
}

#tooltip[data-popper-placement^="left"] > #arrow {
  right: -4px;
}

#tooltip[data-popper-placement^="right"] > #arrow {
  left: -4px;
}

#tooltip[data-show] {
  display: block;
}

/* Swiper js - pagination styling */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  background: #ffffff !important;
  color: #111827 !important;
  width: max-content !important;
  left: unset !important;
  bottom: 8px !important;
  right: 8px !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-weight: 500 !important;
}

.scrollbar-thin {
  scrollbar-width: thin;
}

/* Herodesk chat widget overrides */
#herodesk-livechat {
  right: auto !important;
  left: 0 !important;
  z-index: 25 !important;
}