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

/* Tom Select DaisyUI Styling */
.ts-control {
  @apply input input-bordered w-full min-h-12 text-base text-base-content !important;
}

.ts-control input {
  @apply text-base text-base-content placeholder:text-base;
}

.ts-dropdown {
  @apply mt-2 bg-base-100 rounded-lg border border-base-300 shadow-lg;
}

.ts-dropdown .option {
  @apply px-4 py-2 hover:bg-base-200 cursor-pointer text-base text-base-content;
}

.ts-dropdown .active {
  @apply bg-base-300;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  @apply border-none bg-base-300;
}

/* Bullet Footer Custom Styling */
#bullet-footer {
  @apply bg-base-100 border-error shadow-2xl rounded-lg left-2 bottom-2 !important;
}

#bullet-footer summary {
  @apply font-medium px-4 py-3 text-error !important;
}

#bullet-footer div {
  @apply px-4 py-3 border-t border-base-300 text-error !important;
}

/* Breadcrumbs Custom Styling */
.breadcrumbs-container {
  @apply max-w-6xl text-sm text-base-content/60;
}

.breadcrumbs-container a {
  @apply text-base-content/60 hover:text-primary focus:outline-none focus:text-primary font-semibold underline;
}

.breadcrumbs-container #breadcrumbs-separator {
  @apply px-2 text-base-content/60;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'><path fill='%2378716C' fill-rule='evenodd' d='M3.455 8.211a.417.417 0 0 1 0-.589L6.077 5 3.455 2.378a.417.417 0 0 1 .59-.59L6.96 4.706a.417.417 0 0 1 0 .59L4.045 8.21a.417.417 0 0 1-.59 0Z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
}

mux-uploader {
  display: none;
}

/* Style the drop component as the root container for the page's UI */
mux-uploader-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  padding: 1rem;
  /* Style the overlay background based on the page's color palette */
  --overlay-background-color: rgba(255, 255, 255, 0.792);
}

/* Use a '+' cursor when dragging over the drop subcomponent */
mux-uploader-drop[active] {
  cursor: copy;
}

mux-uploader-drop > [slot="heading"] {
  margin: 0;
}

/* Hide the drop component's separator text using its part selector */
mux-uploader-drop::part(separator) {
  display: none;
}

mux-uploader-drop > .main-content {
  flex-grow: 1;
  align-self: stretch;
}