/* Core CSS required for Ionic components to work properly */
@import "@ionic/vue/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "@ionic/vue/css/normalize.css";
@import "@ionic/vue/css/structure.css";
@import "@ionic/vue/css/typography.css";

/* Optional CSS utils that can be commented out */
@import "@ionic/vue/css/padding.css";

@import "@/stylesheets/variables.css";
@import "@/stylesheets/text-shadow";
@import "@/stylesheets/transitions";
@import "floating-vue/dist/style.css";

/* Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply subpixel-antialiased !important;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  /* Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .grid-scroll-x {
    @apply grid grid-flow-col overflow-x-auto snap-x snap-mandatory scrollbar-hide;
  }

  .grid-scroll-x > * {
    @apply snap-start;
  }

  /* Safari does not respect max-height with aspect-ratio, so workaround it */
  .aspect-square-max-h-screen-1\/2 {
    @apply max-h-screen-1/2 overflow-hidden relative;
  }

  .aspect-square-max-h-screen-1\/2:before {
    content: "";
    @apply block aspect-square;
  }

  .aspect-16\/9-max-h-screen-1\/2 {
    @apply max-h-screen-1/2 overflow-hidden relative;
  }

  .aspect-16\/9-max-h-screen-1\/2:before {
    content: "";
    @apply block aspect-16/9;
  }

  .text-muted {
    @apply text-slate-500;
  }

  /* Vertical padding */
  .main-content {
    @apply md:py-4 lg:py-8 xl:py-12;
  }

  /* ion-content applies the padding on shadow dom parts */
  ion-content.main-content::part(scroll) {
    @apply md:[--padding-top:0rem] md:[--padding-bottom:1rem];
    @apply lg:[--padding-top:0.5rem] lg:[--padding-bottom:2rem];
    @apply xl:[--padding-top:1rem] xl:[--padding-bottom:3rem];
  }

  /* Horizontal padding */
  .main-content > *,
  .main-content-padding {
    @apply md:px-4 lg:px-8 xl:px-12;
    @apply md:scroll-p-4 lg:scroll-p-8 xl:scroll-p-12;
  }

  /* Allow an element to break out of the horizontal padding */
  .main-content-breakout {
    @apply md:-mx-4 lg:-mx-8 xl:-mx-12;
  }
}

.reorder-enabled .hide-reorder {
  display: none;
}

*[routerlink] {
  @apply cursor-pointer;
}

@media print {
  body {
    position: initial !important;
    max-height: initial !important;
    overflow: auto !important;
  }

  ion-router-outlet,
  ion-content {
    overflow: auto !important;
    contain: none !important;
    position: initial !important;
  }

  .no-print,
  ion-menu,
  ion-header,
  ion-footer {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  .always-dark .ion-color-light {
    --ion-color-base: var(--ion-color-dark) !important;
    --ion-color-base-rgb: var(--ion-color-dark-rgb) !important;
    --ion-color-contrast: var(--ion-color-dark-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-dark-shade) !important;
    --ion-color-tint: var(--ion-color-dark-tint) !important;
  }
}

/* Add padding to tooltips to prevent them from running into edge of screen */
.v-popper--theme-tooltip[data-popper-placement="bottom"] {
  @apply px-3;
}

ion-modal::part(handle):focus {
  /* This is just to get rid of focus ring when testing mobile view in development */
  outline: none;
}

ion-modal.auto-height {
  --height: auto;
}

ion-list {
  contain: initial;
}
