@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0.003 247.858);
  --color-base-300: oklch(96% 0.007 247.896);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: oklch(14% 0.005 285.823);
  --color-primary-content: oklch(93% 0.034 272.788);
  --color-secondary: oklch(92% 0.013 255.508);
  --color-secondary-content: oklch(21% 0.006 285.885);
  --color-accent: oklch(93% 0.034 272.788);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(95% 0.045 203.388);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(95% 0.052 163.051);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(96% 0.059 95.617);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(94% 0.03 12.58);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.3125rem;
  --size-field: 0.3125rem;
  --border: 2px;
  --depth: 0;
  --noise: 0;
}

/**
 * I could not figure out how to get the theme above to work for both light and dark mode,
 * so I copied and pasted the light theme and changed the values to dark.
 */
@plugin "daisyui/theme" {
  name: "dark";
  default: false;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0.003 247.858);
  --color-base-300: oklch(96% 0.007 247.896);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: oklch(14% 0.005 285.823);
  --color-primary-content: oklch(93% 0.034 272.788);
  --color-secondary: oklch(92% 0.013 255.508);
  --color-secondary-content: oklch(21% 0.006 285.885);
  --color-accent: oklch(93% 0.034 272.788);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(95% 0.045 203.388);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(95% 0.052 163.051);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(96% 0.059 95.617);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(94% 0.03 12.58);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --size-selector: 0.3125rem;
  --size-field: 0.3125rem;
  --border: 2px;
  --depth: 0;
  --noise: 0;
}

@layer components {
  .container {
    max-width: 768px !important;
    padding-inline: 24px;
    margin: 0 auto;
  }
}

a.btn {
  @apply no-underline;
}

/* Add CSS styles below. */
.example-class {
  /* You can even apply Tailwind classes here. */
  @apply bg-red-500 text-white;
}

/* Override some of the Tailwind .prose CSS */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply m-0 mb-2;
  text-wrap: balance;
}

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

/* Daisy UI Overrides */
.breadcrumbs > ul > li,
.breadcrumbs > ol > li {
  @apply p-0;
}

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

/* Alpine.js */
[x-cloak] {
  display: none;
}

.btn.btn-outline {
  @apply border-2 border-slate-200 hover:border-slate-200 hover:bg-inherit hover:text-inherit;
}

.btn.btn-primary {
  @apply text-white;
}

.btn.btn-primary:disabled {
  @apply bg-slate-200 text-slate-400 cursor-not-allowed shadow-none;
}

/* Trix Editor */
#trix-editor trix-toolbar {
  .trix-button-group {
    button.trix-button,
    input[type="button"].trix-button {
      &.trix-active {
        @apply bg-slate-200;
      }

      &:hover {
        @apply bg-slate-200;
      }

      @apply !border-0 rounded-lg;
    }

    @apply border-0 rounded-lg mb-0;
  }

  [data-trix-button-group="file-tools"] {
    @apply !hidden;
  }

  [data-trix-attribute="quote"] {
    @apply !border-l-0;
  }

  [data-trix-dialog][data-trix-active] {
    .trix-input {
      @apply border-2 border-slate-200 rounded-lg;
    }

    @apply !border-0 rounded-xl p-6;
  }

  @apply mb-6 sticky top-2 left-0 right-0 z-50 border-0 bg-slate-100 px-3 py-2 rounded-full;
}

trix-editor,
.rendered-markdown {
  h1 {
    @apply text-2xl font-extrabold;
  }

  :first-child {
    @apply mt-0;
  }

  :last-child {
    @apply mb-0;
  }

  @apply p-0 m-0 border-0 text-xl leading-relaxed;
}

#trix-editor trix-editor {
  a {
    @apply font-medium underline;
  }

  ul {
    @apply list-disc list-inside;
  }

  ol {
    @apply list-decimal list-inside;
  }

  @apply p-6 border-2 border-slate-200 rounded-lg;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  &:-internal-autofill-selected {
    @apply !border-2 !border-slate-200 !bg-white;
  }

  @apply !border-2 !border-slate-200 !bg-white;
}
