/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.ts-control {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
  border-radius: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-base-100);
}

.ts-control input {
  min-width: 12rem;
}

.ts-dropdown {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  box-shadow: 0 8px 28px rgba(2, 8, 20, 0.12);
}

.ts-dropdown .option {
  padding: 0.5rem 0.65rem;
}

.ts-dropdown .option.active {
  background: var(--color-base-200);
}

/* Fix DaisyUI collapse arrow alignment */
.collapse-arrow > .collapse-title:after {
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg);
}

.collapse-arrow > input[type="checkbox"]:checked ~ .collapse-title:after {
  top: 50% !important;
  transform: translateY(-50%) rotate(225deg);
}