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

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

@layer base {
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply cursor-pointer rounded bg-layer-4;
  }

  :not(:hover)::-webkit-scrollbar-thumb {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-track:hover {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-corner {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar {
    @apply h-[4px] w-[4px];
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  :hover {
    scrollbar-color: theme('backgroundColor.layer-4')
      theme('colors.transparent');
  }

  /* TODO: fix calendar color for different themes */
  ::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://ww.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="var(--icon-color)" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
  }

  .divide-y > :empty ~ :not([hidden]) {
    border-top: none;
    border-bottom: none;
  }

  .codeblock .table {
    display: initial;
  }

  .break-words {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

html {
  @apply bg-layer-1 text-primary;
}

pre:has(div.codeblock) {
  padding: 0;
}

@layer components {
  .temperature-slider .rc-slider-rail,
  .temperature-slider .rc-slider-track {
    @apply top-[calc(50%-6px)] h-3;
  }

  .temperature-slider .rc-slider-rail {
    @apply rounded-full bg-layer-1;
  }

  .temperature-slider .rc-slider-track {
    @apply rounded-full bg-controls-accent;
  }

  .input-form {
    @apply m-0.5 w-full rounded border border-primary bg-transparent px-3 py-2 placeholder:text-secondary hover:border-accent-primary focus:border-accent-primary focus:outline-none;
  }

  .input-invalid {
    @apply invalid:border-error;
  }
}
@layer components {
  .input {
    @apply m-0.5 w-full rounded border border-primary bg-transparent px-3 py-2 placeholder:text-secondary hover:border-accent-primary focus:border-accent-primary focus:outline-none;
  }
  .input.touched.invalid,
  .input.dirty.invalid {
    @apply border-error;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
    color: transparent;
  }
}

@layer components {
  .button {
    @apply rounded border border-transparent px-3 py-2.5 outline-none;
  }

  .button:disabled {
    @apply bg-controls-disable text-controls-disable;
  }

  .button:focus-visible,
  .button.button-secondary:focus-visible {
    @apply border-hover;
  }

  .button.button-primary {
    @apply text-controls-permanent;
  }

  .button.button-primary:disabled {
    @apply text-controls-disable;
  }

  .button.button-primary:not(:disabled) {
    @apply bg-controls-accent hover:bg-controls-accent-hover;
  }

  .button.button-secondary {
    @apply border-primary text-primary;
  }

  .button.button-secondary:not(:disabled) {
    @apply bg-transparent hover:bg-layer-4;
  }

  .button.button-secondary:disabled {
    @apply cursor-not-allowed bg-layer-3 text-controls-disable;
  }

  .button.button-chat {
    @apply absolute inset-x-0 -top-14 mx-auto mb-3 flex w-fit items-center gap-2 border-primary bg-layer-2 p-3 hover:bg-layer-4;
  }
}

@layer components {
  .icon-button {
    @apply flex items-center justify-center rounded border border-transparent p-[5px] outline-none;
  }

  .icon-button:disabled {
    @apply cursor-not-allowed text-controls-disable;
  }

  .icon-button:not(:disabled) {
    @apply text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary;
  }

  .icon-button.button-accent-primary:not(:disabled) {
    @apply text-accent-primary;
  }

  .icon-button.button-error:not(:disabled) {
    @apply text-error hover:bg-error;
  }

  .icon-button.button-accent-secondary:not(:disabled) {
    @apply text-accent-secondary hover:bg-accent-secondary-alpha;
  }
}

@layer components {
  .chat-button {
    @apply cursor-pointer rounded-xl border px-4 py-2.5 text-sm leading-tight;
  }

  .chat-button:disabled {
    @apply cursor-not-allowed border-primary bg-transparent text-controls-disable;
  }

  .chat-button:not(:disabled) {
    @apply border-primary bg-layer-3 text-primary hover:bg-layer-4;
  }

  .chat-button.button-accent-primary {
    @apply border-accent-primary bg-accent-primary-alpha text-primary;
  }
}

@layer components {
  .checkbox {
    @apply relative m-0 mr-2 inline h-4 w-4 shrink-0 appearance-none rounded-sm border border-primary text-accent-primary checked:border-accent-primary indeterminate:border-accent-primary hover:border-accent-primary focus-visible:outline-none;
  }
}

@layer components {
  .sidebar-left,
  .context-menu-chat {
    --text-accent-primary: var(--text-accent-secondary, #37babc);
    --stroke-accent-primary: var(--stroke-accent-secondary, #37babc);
    --bg-accent-primary-alpha: var(--bg-accent-secondary-alpha, #37babc26);
    --bg-accent-primary: var(--bg-accent-secondary, #37babc);
  }

  .sidebar-right,
  .context-menu-prompt {
    --text-accent-primary: var(--text-accent-tertiary, #a972ff);
    --stroke-accent-primary: var(--stroke-accent-tertiary, #a972ff);
    --bg-accent-primary-alpha: var(--bg-accent-tertiary-alpha, #a972ff26);
    --bg-accent-primary: var(--bg-accent-tertiary, #a972ff);
  }
}

.h-screen {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  height: calc(var(--vh, 1vh) * 100);
}

span.katex-mathml {
  display: none;
}
