/* Entry point for your PostCSS build */

@import "tailwindcss";

@import "tippy.js/dist/tippy.css";
@import "tippy.js/themes/light.css";
@import "photoswipe/dist/photoswipe.css";
@import "leaflet/dist/leaflet.css";

@import "./application/slim_select";
@import "./application/alerts";
@import "./application/badges";
@import "./application/buttons";
@import "./application/forms";
@import "./application/typography";
@import "./application/navbar";
@import "./application/tables";
@import "./application/sidebar";

@import "./application/landing";

@plugin "@tailwindcss/forms";

@theme {
  --breakpoint-2xl: initial;

  --font-sans:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-brand: "Epilogue", sans-serif;
}

html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

.tippy-box {
  @apply bg-gray-700;
}

.tippy-arrow::before {
  @apply text-gray-700;
}

.autocomplete {
  @apply border border-gray-200;
  background: white;
  z-index: 1000;
  overflow: auto;
}

.autocomplete > div {
  @apply py-2 px-3 text-gray-700 text-sm;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
  @apply bg-gray-50 cursor-pointer;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

.main {
  flex: 1;
}

.typing-indicator {
  animation: typing 1s infinite;
}

@keyframes typing {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.75;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

/* Hotwire's version of data-disable-with */
button .when-disabled {
  display: none;
}

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

button .when-enabled {
  display: initial;
}

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

#SignWell-Modal-Embedded {
  @apply z-10;
}

[data-controller="expandable"]
  [data-expandable-target="content"][data-expanded="true"] {
  max-height: none;
}

[data-controller="expandable"]
  [data-expandable-target="content"].expanded
  .bg-gradient-to-t {
  display: none;
}

/* UI / Marks input fields as reqiered */
label:has(+ input:required)::after,
label:has(+ select:required)::after,
label:has(+ textarea:required)::after {
  content: " *";
  margin-right: 0.25rem;
  color: red;
}

/* Driver app */

.driver-app .message-time {
  @apply text-sm;
}

body#preview {
  & nav {
    & summary {
      list-style: none;
    }

    & summary::-webkit-details-marker {
      display: none;
    }

    & details[open] {
      & #icon-open {
        display: none;
      }

      & #icon-close {
        display: block;
      }
    }
  }

  /* Prevent body scrolling when mobile menu is open */
  &:has(nav details[open]) {
    overflow: hidden;
  }
}