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

@layer utilities {
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
  }
}
@layer components {
  .jsoneditor {
    @apply overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm dark:border-gray-700 dark:bg-gray-800/50;
  }

  .jsoneditor div.jsoneditor-tree,
  .ace-jsoneditor .ace_scroller {
    @apply text-gray-700 dark:text-gray-300;
  }

  .ace-jsoneditor .ace_scrollbar {
    @apply dark:invert;
  }

  .jsoneditor div.jsoneditor-tree {
    @apply bg-white dark:bg-transparent;
  }

  .jsoneditor textarea.jsoneditor-text {
    @apply bg-transparent p-3 leading-relaxed;
  }

  .jsoneditor .jsoneditor-text,
  .jsoneditor .jsoneditor-tree {
    @apply bg-transparent text-gray-700 dark:bg-transparent dark:text-gray-300;
  }

  .jsoneditor .jsoneditor-readonly {
    @apply text-gray-400;
  }

  .jsoneditor .jsoneditor-field {
    @apply border-none text-gray-700 hover:bg-gray-100 dark:bg-transparent dark:hover:bg-gray-700;
  }

  .jsoneditor .jsoneditor-value {
    @apply border-none text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700;
  }

  .jsoneditor .jsoneditor-value.jsoneditor-string,
  .jsoneditor .ace_string {
    @apply text-green-600 dark:text-green-500;
  }

  .jsoneditor .jsoneditor-value.jsoneditor-number,
  .jsoneditor .ace_numeric {
    @apply text-blue-600 dark:text-blue-500;
  }

  .jsoneditor .jsoneditor-value.jsoneditor-boolean,
  .jsoneditor .ace_boolean {
    @apply text-red-600 dark:text-red-500;
  }

  .ace-jsoneditor .ace_gutter {
    @apply border-r border-gray-200 bg-gray-100 text-gray-500 dark:border-gray-700 dark:bg-gray-800;
  }

  .ace-jsoneditor .ace_gutter-active-line {
    @apply bg-yellow-500/20 text-gray-900;
  }

  .ace-jsoneditor .ace_active-line {
    @apply bg-yellow-500/20;
  }

  .ace-jsoneditor .ace_variable {
    @apply text-gray-900;
  }

  .ace-jsoneditor .ace_indent-guide {
    @apply border-r border-gray-200 bg-none dark:border-gray-700;
  }

  .ace-jsoneditor .ace_marker-layer .ace_selection {
    @apply bg-gray-900/10 dark:bg-white/10;
  }

  .jsoneditor .jsoneditor-statusbar {
    @apply border-t border-gray-200 bg-white px-2 text-xs leading-[26px] text-gray-500 dark:border-gray-700 dark:bg-gray-900;
  }

  .jsoneditor-menu a.jsoneditor-poweredBy {
    @apply font-sans text-xs text-gray-400 opacity-100;
  }

  /* Search */
  .jsoneditor .jsoneditor-search .jsoneditor-results {
    @apply font-sans text-xs;
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame {
    @apply rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-gray-900;
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame input[type='text'] {
    @apply h-[22px] border-none bg-transparent font-sans text-xs leading-[22px] text-gray-700 dark:text-gray-300;
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh {
    @apply ml-1 bg-none;
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-refresh:after {
    @apply material-symbols-outlined text-[16px] leading-[24px] text-gray-500 content-['search'];
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next,
  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous {
    @apply bg-none text-gray-500;
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after,
  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after {
    @apply material-symbols-outlined text-[16px] !leading-[24px];
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-next:after {
    @apply content-['keyboard\_double\_arrow\_down'];
  }

  .jsoneditor .jsoneditor-search .jsoneditor-frame .jsoneditor-previous:after {
    @apply content-['keyboard\_double\_arrow\_up'];
  }

  /* Navigation bar */
  .jsoneditor .jsoneditor-navigation-bar {
    @apply border-b border-gray-200 bg-gray-50 px-2 text-xs leading-[26px] text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300;
  }

  .jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator {
    @apply text-[0px];
  }

  .jsoneditor .jsoneditor-treepath .jsoneditor-treepath-seperator:after {
    @apply material-symbols-outlined align-[-4px] text-gray-400 content-['chevron\_right'];
  }

  /* Menu */
  .jsoneditor-menu {
    @apply border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800;
  }

  .jsoneditor .jsoneditor-menu > button {
    @apply cursor-pointer rounded-lg border border-gray-200 bg-white bg-none text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300;
  }

  .jsoneditor .jsoneditor-menu > button:after {
    @apply material-symbols-outlined text-[16px] leading-[24px];
  }

  .jsoneditor-menu > button.jsoneditor-format {
    @apply after:content-['format\_align\_right'];
  }

  .jsoneditor-menu > button.jsoneditor-compact {
    @apply after:content-['format\_align\_left'];
  }

  .jsoneditor-menu > button.jsoneditor-sort {
    @apply after:content-['sort'];
  }

  .jsoneditor-menu > button.jsoneditor-transform {
    @apply after:content-['transform'];
  }

  .jsoneditor-menu > button.jsoneditor-repair {
    @apply after:content-['handyman'];
  }

  .jsoneditor-menu > button.jsoneditor-undo {
    @apply after:content-['undo'];
  }

  .jsoneditor-menu > button.jsoneditor-redo {
    @apply after:content-['redo'];
  }

  .jsoneditor-menu > button.jsoneditor-expand-all {
    @apply after:content-['expand'];
  }

  .jsoneditor-menu > button.jsoneditor-collapse-all {
    @apply after:content-['compress'];
  }

  .jsoneditor-menu > div.jsoneditor-modes > button {
    @apply cursor-pointer border-none bg-transparent font-sans text-gray-700 hover:bg-none dark:text-gray-300;
  }

  /* Context menu */
  .jsoneditor-contextmenu .jsoneditor-menu {
    @apply overflow-clip rounded-lg border border-gray-200 bg-white py-1 shadow-sm dark:border-gray-700 dark:bg-gray-800;
  }

  .jsoneditor-contextmenu .jsoneditor-menu li {
    @apply relative flex flex-col;
  }

  .jsoneditor-contextmenu .jsoneditor-menu button {
    @apply mx-1 h-[30px] w-auto flex-grow rounded-lg bg-transparent px-3 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200;
  }

  .jsoneditor-contextmenu button .jsoneditor-icon {
    @apply w-auto;
  }

  .jsoneditor-contextmenu button .jsoneditor-text {
    @apply bg-transparent p-0 font-sans text-gray-700 dark:text-gray-300;
  }

  .jsoneditor-contextmenu .jsoneditor-selected {
    @apply bg-transparent;
  }

  .jsoneditor-contextmenu .jsoneditor-selected > button > .jsoneditor-text {
    @apply text-purple-600 dark:text-purple-500;
  }

  .jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand {
    @apply right-0.5 top-0.5 m-0 flex items-center justify-center p-0;
  }

  .jsoneditor .jsoneditor-selected,
  .jsoneditor .jsoneditor-highlight {
    @apply bg-gray-50 dark:bg-gray-800;
  }

  .jsoneditor div.jsoneditor-expand,
  .jsoneditor .jsoneditor-button.jsoneditor-collapsed,
  .jsoneditor .jsoneditor-button.jsoneditor-expanded,
  .jsoneditor .jsoneditor-dragarea,
  .jsoneditor .jsoneditor-contextmenu-button {
    @apply bg-transparent bg-none outline-none;
  }

  .jsoneditor div.jsoneditor-expand:after,
  .jsoneditor .jsoneditor-dragarea:after,
  .jsoneditor .jsoneditor-contextmenu-button:after,
  .jsoneditor .jsoneditor-button.jsoneditor-collapsed:after,
  .jsoneditor .jsoneditor-button.jsoneditor-expanded:after {
    @apply material-symbols-outlined text-[16px] leading-[24px] text-gray-500;
  }

  .jsoneditor div.jsoneditor-expand:after {
    @apply content-['arrow\_drop\_down'];
  }

  .jsoneditor .jsoneditor-contextmenu-button:after {
    @apply content-['toolbar'];
  }

  .jsoneditor .jsoneditor-dragarea:after {
    @apply content-['drag\_indicator'];
  }

  .jsoneditor .jsoneditor-button.jsoneditor-collapsed:after {
    @apply content-['keyboard\_arrow\_up'];
  }

  .jsoneditor .jsoneditor-button.jsoneditor-expanded:after {
    @apply content-['keyboard\_arrow\_down'];
  }

  .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand {
    @apply absolute right-0 top-0 border-none hover:bg-transparent;
  }

  .jsoneditor .jsoneditor-separator {
    @apply border-gray-200 dark:border-gray-700;
  }

  /* Modal */
  .jsoneditor-modal.pico-content {
    @apply rounded-lg border-none font-sans text-gray-700 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300;
  }

  .jsoneditor-modal p {
    @apply leading-relaxed;
  }

  .jsoneditor-modal p a {
    @apply text-purple-600 dark:text-purple-500;
  }

  .jsoneditor-modal .pico-modal-header {
    @apply h-auto border-b border-gray-200 bg-transparent px-3 py-1.5 text-base font-semibold tracking-tight text-gray-900 dark:border-gray-700;
  }

  .jsoneditor-modal .pico-modal-contents {
    @apply mt-3 block;
  }

  .jsoneditor-modal .jsoneditor-jmespath-label {
    @apply text-sm text-gray-900;
  }

  .jsoneditor-modal.pico-content .pico-close {
    @apply -mt-[13px] mr-2 text-[0px] text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
  }

  .jsoneditor-modal.pico-content .pico-close:after {
    @apply material-symbols-outlined text-[16px] leading-[24px] content-['close'];
  }

  .jsoneditor-modal.pico-content select,
  .jsoneditor-modal.pico-content #query,
  .jsoneditor-modal.pico-content textarea {
    @apply min-w-sm min-h-[38px] rounded-lg border border-gray-200 bg-white px-3 text-gray-700 shadow-sm outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300;
  }

  .jsoneditor-modal.pico-content #query,
  .jsoneditor-modal.pico-content textarea {
    @apply py-2;
  }

  .jsoneditor-modal.pico-content input[type='submit'] {
    @apply relative flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border-gray-200 border-transparent bg-purple-600 px-3 py-2 font-medium text-white;
  }

  .jsoneditor-modal.pico-content .jsoneditor-modal-actions {
    @apply m-0;
  }

  .jsoneditor-modal.pico-content form {
    @apply w-[570px] font-sans text-gray-700 dark:text-gray-300;
  }

  .jsoneditor-modal.pico-content .jsoneditor-button-group {
    @apply flex flex-row justify-end gap-2;
  }

  .jsoneditor-modal-input input[type='button'].jsoneditor-button-asc,
  .jsoneditor-modal-input input[type='button'].jsoneditor-button-desc {
    @apply h-[38px] cursor-pointer rounded-lg border border-gray-200 bg-gray-50 font-sans text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300;
  }

  .jsoneditor-modal
    .jsoneditor-button-group.jsoneditor-button-group-value-asc
    input.jsoneditor-button-asc,
  .jsoneditor-modal
    .jsoneditor-button-group.jsoneditor-button-group-value-desc
    input.jsoneditor-button-desc {
    @apply border-purple-600 bg-purple-600 text-white;
  }

  .jsoneditor-modal table td,
  .jsoneditor-modal table th {
    @apply font-sans text-gray-700 dark:text-gray-300;
  }
}