@import 'react-toastify/dist/ReactToastify.css';

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

:root {
  /* Light Theme */
  --cl-bg-120:        hsl(000, 000%, 100%);
  --cl-bg-100:        hsl(000, 000%, 098%);
  --cl-bg-80:         hsl(000, 000%, 094%);
  --cl-bg-60:         hsl(000, 000%, 091%);
  --cl-bg-40:         hsl(000, 000%, 080%);

  --cl-fg-60:         hsl(000, 000%, 065%);
  --cl-fg-80:         hsl(000, 000%, 047%);
  --cl-fg-100:        hsl(000, 000%, 000%);

  --cl-prim-bg-100:   hsl(220, 100%, 060%);
  --cl-prim-bg-80:    hsl(220, 080%, 092%);
  --cl-prim-bg-60:    hsl(190, 080%, 094%);
  
  --cl-prim-fg-80:    hsl(220, 100%, 050%);
  --cl-prim-fg-100:   hsl(000, 000%, 100%);

  --cl-red-bg-100:    hsl(000, 100%, 095%);
  --cl-red-fg-100:    hsl(000, 072%, 051%);
  --cl-green-fg-100:  hsl(120, 080%, 37%);

  /* Dark Theme */
  --cd-bg-120:        hsl(000, 000%, 005%);
  --cd-bg-100:        hsl(000, 000%, 009%);
  --cd-bg-80:         hsl(000, 000%, 015%);
  --cd-bg-60:         hsl(000, 000%, 022%);
  --cd-bg-40:         hsl(000, 000%, 035%);
  
  --cd-fg-60:         hsl(000, 000%, 055%);
  --cd-fg-80:         hsl(000, 000%, 080%);
  --cd-fg-100:        hsl(000, 000%, 093%);

  --cd-prim-bg-100:   hsl(267, 050%, 050%);
  --cd-prim-bg-80:    hsl(267, 050%, 032%);
  --cd-prim-bg-60:    hsl(269, 030%, 028%);

  --cd-prim-fg-80:    hsl(267, 070%, 070%);
  --cd-prim-fg-100:   hsl(000, 000%, 100%);

  --cd-red-bg-100:    hsl(000, 100%, 015%);
  --cd-red-fg-100:    hsl(000, 080%, 055%);
  --cd-green-fg-100:  hsl(120, 080%, 042%);

  /* Import overrides */
  --toastify-color-dark: var(--cd-bg-60);
}

/* Depth layers */
.z-bottom {
  z-index: 0;
}
.z-pop {
  z-index: 10;
}
:is(.z-sticky,
  .sticky
) {
  z-index: 20;
}
.z-tooltip {
  z-index: 30;
}
.z-navigation {
  z-index: 50;
}
.z-modal {
  z-index: 60;
}
.z-modal-controls {
  z-index: 70;
}
.z-modal-top {
  z-index: 80;
}
.z-modal-tooltip {
  z-index: 90;
}


:root {
  color: var(--cl-fg-100);
  border-color: var(--cl-bg-40);
  background-color: var(--cl-bg-100);

  &.dark {
    color: var(--cd-fg-100);
    border-color: var(--cd-bg-40);
    background-color: var(--cd-bg-100);
  }
}

:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: transparent;
  .dark & {
    outline-color: transparent;
  }
}

::selection {
  background: var(--cl-prim-bg-60);
  .dark & {
    background: var(--cd-prim-bg-60);
  }
  tr :hover& {
    background: var(--cl-red-bg-100);
    .dark & {
      background: var(--cd-red-bg-100);
    }
  }
}

::placeholder {
  color: var(--cl-fg-60);
  .dark & {
    color: var(--cd-fg-60);
  }
}

[data-color-scheme="dark"] {
  color-scheme: dark;
}

[data-color-scheme="light"] {
  color-scheme: light;
}

@layer utilities {
  .small-caps {
    font-variant: small-caps;
  }
}

@layer components {
  h1 {
    @apply text-lg font-semibold text-center
  }

  h2 {
    @apply font-semibold text-center
  }

  b {
    @apply font-semibold
  }

  .border {
    @apply rounded
  }
  
  .shadow-border {
    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)]
  }

  .clr-modal-backdrop {
    opacity: 0.75;
  }

  :is(.clr-border,
    .border, .border-x, .border-y, .border-b, .border-t, .border-l, .border-r,
    .border-2, .border-x-2, .border-y-2, .border-b-2, .border-t-2, .border-l-2, .border-r-2,
    .divide-x, .divide-y, .divide-x-2, .divide-y-2
  ) {
    border-color: var(--cl-bg-40);
    @apply divide-inherit;
    .dark & {
      border-color: var(--cd-bg-40);
    }
  }

  :is(.clr-app,
    .clr-footer,
    .clr-modal-backdrop,
    .clr-btn-nav,
    .clr-input:disabled
  ) {
    background-color: var(--cl-bg-100);
    .dark & {
      background-color: var(--cd-bg-100);
    }
  }

  :is(.clr-input
   ) {
    background-color: var(--cl-bg-120);
    .dark & {
      background-color: var(--cd-bg-120);
    }
  }

  :is(.clr-controls,
    .clr-tab,
    .clr-btn-default
  ) {
    background-color: var(--cl-bg-80);
    .dark & {
      background-color: var(--cd-bg-80);
    }
  }

  :is(.clr-primary,
    .clr-btn-primary:hover,
    .clr-btn-primary:focus
  ) {
    @apply transition;
    color: var(--cl-prim-fg-100);
    background-color: var(--cl-prim-bg-100);
    .dark & {
      color: var(--cd-prim-fg-100);
      background-color: var(--cd-prim-bg-100);
    }
  }

  :is(.clr-selected,
    .clr-btn-primary
  ) {
    color: var(--cl-fg-100);
    background-color: var(--cl-prim-bg-80);
    .dark & {
      color: var(--cd-fg-100);
      background-color: var(--cd-prim-bg-80);
    }
  }

  :is(.clr-disabled,
    .clr-btn-default,
    .clr-btn-primary
  ):disabled {
    @apply transition;
    color: var(--cl-fg-80);
    background-color: var(--cl-bg-60);
    .dark & {
      color: var(--cd-fg-80);
      background-color: var(--cd-bg-60);
    }
  }

  :is(.clr-hover,
    .clr-tab,
    .clr-btn-nav,
    .clr-btn-default
  ):hover:not(:disabled) {
    @apply transition;
    color: var(--cl-fg-100);
    background-color: var(--cl-prim-bg-60);
    .dark & {
      color: var(--cd-fg-100);
      background-color: var(--cd-prim-bg-60);
    }
  }

  :is(.clr-outline,
    .clr-btn-primary
  ):focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--cl-prim-bg-100);
    .dark & {
      outline-color: var(--cd-prim-bg-100);
    }
  }

  :is(.clr-text-primary,
    .clr-text-url
  ) {
    color: var(--cl-prim-fg-80);
    .dark & {
      color: var(--cd-prim-fg-80);
    }
  }

  .clr-footer {
    color: var(--cl-fg-60);
    .dark & {
      color: var(--cd-fg-60);
    }
  }

  :is(.clr-text-controls,
    .clr-btn-nav,
    .clr-btn-clear
  ) {
    color: var(--cl-fg-80);
    &:disabled {
      color: var(--cl-fg-60);
    }
    .dark & {
      color: var(--cd-fg-80);
      &:disabled {
        color: var(--cd-fg-60);
      }
    }
  }

  .clr-warning {
    background-color: var(--cl-red-bg-100);
    .dark & {
      background-color: var(--cd-red-bg-100);
    }
  }

  .clr-text-default {
    color: var(--cl-fg-100);
    .dark & {
      color: var(--cd-fg-100);
    }
  }

  .clr-text-warning {
    color: var(--cl-red-fg-100);
    .dark & {
      color: var(--cd-red-fg-100);
    }
  }

  .clr-text-success {
    color: var(--cl-green-fg-100);
    .dark & {
      color: var(--cd-green-fg-100);
    } 
  }
}

.cm-editor {
  resize: vertical;
  overflow-y: auto;
  border-color: var(--cl-bg-40);
  .dark & {
    border-color: var(--cd-bg-40);
  }
  @apply border rounded px-[0.375rem] py-[0.15rem]
}
.cm-editor.cm-focused {
  border-color: var(--cl-bg-40);
  outline-color: var(--cl-prim-bg-100);
  .dark & {
    border-color: var(--cd-bg-40);
    outline-color: var(--cd-prim-bg-100);
  }
  @apply outline-2 outline
}

.cm-editor .cm-placeholder {
  color: var(--cl-fg-60);
  .dark & {
    color: var(--cd-fg-60);
  }
}

.rdt_TableCell{
  font-size: 0.875rem;
}
