@import "tailwindcss" source(none);
@source "../../helpers";
@source "../../inputs";
@source "../../javascript";
@source "../../views";
@source "../../assets/stylesheets/sysadmin.tailwind.css";

@plugin "daisyui" {
  themes: corporate --default, luxury --prefersdark;
}

@import "intl-tel-input/build/css/intlTelInput.css";
@import "quill/dist/quill.snow.css";

/* Pagy classes - required to make it look like DaisyUI's pagination component */
.pagy.series-nav {
  @apply inline-flex;
}

.pagy.series-nav a {
  @apply btn join-item;
}

.pagy.series-nav a:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

.pagy.series-nav a:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pagy.series-nav a:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pagy.series-nav a[aria-current="page"] {
  @apply border-base-300 bg-base-300;
}

.iti {
  --iti-path-flags-1x: url("/images/flags/flags.webp");
  --iti-path-flags-2x: url("/images/flags/flags@2x.webp");
  --iti-path-globe-1x: url("/images/flags/globe.webp");
  --iti-path-globe-2x: url("/images/flags/globe@2x.webp");

  width: 100%;
}

.iti__search-input {
  @apply p-2
}

:root {
  --radius-box: 0.25rem;
}

.label {
  @apply block;
}

.input {
  @apply block;
}

.form-control {
  @apply mb-3;
}

.form-actions {
  @apply my-3 flex gap-3;
}

.breadcrumbs a {
  @apply link-info;
}

.ql-editor {
  @apply min-h-[400px];
  @apply min-w-[100px];
}

.ql-snow .ql-picker {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

.ql-snow .ql-picker-options {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
}

.ql-snow.ql-toolbar .ql-picker-item{
  @apply px-3;
}

.ql-snow.ql-toolbar .ql-picker-item.ql-selected{
  color: var(--color-base-content);
  background-color: var(--color-base-200);
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{
  @apply hidden;
}

.ql-toolbar.ql-snow .ql-formats {
  margin: 0;
}

.ql-snow .ql-picker.ql-size {
  @apply w-15;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar .ql-picker-label:hover {
  color: var(--color-base-content);
  stroke: var(--color-base-content);
}

.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill {
  fill: var(--color-base-content);
}

#text_overrides {
  height: 400px !important;
  font-family: monospace;
  width: 100%;
  max-width: 100%;
}

.color-preview {
  width: 34px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-top: 3px;
}

@media (prefers-color-scheme: dark) {
  .btn-primary {
    background: var(--color-neutral);
    color: var(--color-neutral-content);
    border-color: var(--color-neutral);
    outline-color: var(--color-neutral,var(--color-neutral-content));
    box-shadow: 0 3px 2px -2px color-mix(in oklab,var(--color-neutral)calc(var(--depth)*30%),#0000),0 4px 3px -2px color-mix(in oklab,var(--color-neutral)calc(var(--depth)*30%),#0000);
  }

  .iti {
    --iti-border-color: #5b5b5b;
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: var(--color-base-100);
    --iti-arrow-color: #aaaaaa;
    --iti-hover-color: var(--color-neutral);
    --iti-path-globe-1x: url("/images/flags/globe_light.webp");
    --iti-path-globe-2x: url("/images/flags/globe_light@2x.webp");
  }
}