body {
  @apply font-sans;
}
/** Dropdowns, text inputs, selects. */
.bx--dropdown,
.bx--search-input {
  @apply rounded border-0 bg-neutral-50;
}
.bx--select-input,
.bx--text-input,
.bx--number input[type='number'] {
  @apply border border-solid border-neutral-300  !bg-neutral-100 outline-0;
}
.bx--number__control-btn {
  @apply border-0;
}
.bx--list-box__field .bx--text-input {
  @apply border-0;
}
.bx--select-input:focus,
.bx--dropdown:focus,
.bx--text-input:focus,
.bx--search-input:focus {
  @apply outline-1 outline-neutral-500;
}
.bx--select-input:hover,
.bx--dropdown:hover,
.bx--text-input:hover,
.bx--search-input:hover {
  @apply bg-neutral-50 outline-1 outline-neutral-400;
}
/** Dropdown items */
.bx--list-box {
  @apply border-0;
}
.bx--list-box__menu-item {
  @apply bg-neutral-50;
}
.bx--list-box__menu-item--highlighted {
  @apply bg-neutral-300;
}
.bx--list-box__menu {
  @apply rounded;
}

/** Tooltips */
[role='tooltip'] {
  z-index: 10000;
}

/** Button. */
button {
  @apply box-border rounded p-2;
}
button:hover {
  @apply bg-gray-200;
}
button:focus {
  @apply outline outline-2 outline-blue-700;
}
button:active {
  @apply bg-gray-300 outline outline-1 outline-blue-700;
}
button:disabled {
  @apply pointer-events-none bg-transparent;
}

/** Carbon Svelte button. */
.bx--btn {
  @apply rounded p-2;
}
.bx--btn.bx--btn--primary {
  @apply text-white;
  background-color: #4550e8;
}
.bx--btn.bx--btn--primary:hover {
  background-color: #1741c1;
}
.bx--btn.bx--btn--secondary {
  @apply text-white;
}
.bx--btn--tertiary {
  @apply border-gray-300 text-gray-600;
}
.bx--btn--tertiary:hover {
  @apply bg-gray-600 text-white;
}
.bx--btn--ghost {
  @apply border-transparent bg-transparent text-black;
}
.bx--btn--ghost:hover {
  @apply bg-gray-200;
}
.bx--btn.bx--btn--primary.bx--btn--disabled {
  @apply border-neutral-300 bg-slate-100 text-neutral-500;
}
.bx--btn .bx--btn__icon {
  @apply static ml-2 mr-1;
}
/** Modals */
.bx--modal-container {
  @apply rounded !bg-white;
}
.bx--modal-content.bx--modal-content--with-form {
  @apply my-0 pb-4 pt-0;
}
/** Don't change the buttons for the modal. */
.bx--modal-footer .bx--btn {
  @apply rounded-none border-none;
}
.bx--modal-header {
  @apply m-0 border-gray-200 py-4;
}

/** Expressive buttons */
.bx--btn--icon-only.bx--btn--expressive {
  @apply p-1;
}

/** Tooltips */
.bx--tooltip__label {
  @apply align-middle;
}

/** Rag components */
.rag-section-header {
  @apply w-full pb-4 font-medium;
}

.header {
  @apply flex-shrink-0;
  height: 4rem;
}

.lilac-container {
  container-type: inline-size;
  @apply flex w-full flex-col overflow-y-auto;
}

.lilac-page {
  @apply mx-auto w-full py-8;
}

@container (min-width: 640px) {
  .lilac-page {
    max-width: 640px;
  }
}

@container (min-width: 768px) {
  .lilac-page {
    max-width: 768px;
  }
}

@container (min-width: 1024px) {
  .lilac-page {
    max-width: 1024px;
  }
}

@container (min-width: 1280px) {
  .lilac-page {
    max-width: 1280px;
  }
}

@container (min-width: 1536px) {
  .lilac-page {
    max-width: 1536px;
  }
}

h1 {
  @apply text-2xl;
}
h1:not(:first-child) {
  @apply mt-6;
}
h2 {
  @apply text-xl;
}
h2:not(:first-child) {
  @apply mt-4;
}
h3 {
  @apply text-lg;
}
h3:not(:first-child) {
  @apply mt-3;
}

h4 {
  @apply text-base;
}
h4:not(:first-child) {
  @apply mt-2;
}
h5 {
  @apply text-sm;
}

/** Reset CSS set by carbon components and that clashes with tailwind */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border-style: solid;
}

/** Global styles for markdown rendering */

.markdown pre {
  @apply overflow-x-auto bg-slate-200 p-2 text-sm;
}
.markdown pre {
  @apply my-3;
}
.markdown p,
.markdown h1 {
  background-color: inherit;
}
.markdown p {
  @apply mt-3 text-sm;
  font-weight: inherit;
}
.markdown ul {
  @apply mt-3 list-inside list-disc;
}
/** Inline the last paragraph that preceeds the highlight. */
.markdown:has(+ .highlighted) p:last-child {
  @apply !inline;
}
/** Inline the first paragraph that succeeds the highlight. */
:global(.highlighted + .markdown p:first-child) {
  @apply !inline;
}
:global(.highlighted p) {
  @apply !inline;
}

/** Table styles for markdown inspired by https://flowbite.com/docs/components/tables/*/
.markdown table {
  @apply text-left text-sm text-gray-500 rtl:text-right;
}
.markdown table thead {
  @apply bg-gray-50 text-xs font-bold uppercase text-gray-700;
}
.markdown table thead th {
  @apply px-6 py-3;
}
.markdown table tbody tr {
  @apply border-b border-gray-200 bg-white;
}
.markdown table tbody th {
  @apply whitespace-nowrap px-6 py-4 font-medium text-gray-900;
}
.markdown table tbody td {
  @apply px-6 py-4;
}
