packages/ui/src/globals.css

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

@layer base {
  :root {
    --background: 0, 0%, 100%;
    --foreground: 0, 0%, 7%;
    --card: 45 18% 96%;
    --card-foreground: 240 10% 3.9%;
    --popover: 45 18% 96%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 40, 11%, 89%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 40, 11%, 89%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 40, 10%, 94%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --muted-foreground: 0, 0%, 38%;
    --border: 45, 5%, 85%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
    /* Chart colors */
    --chart-grid-stroke: #e6e6e6;
    --chart-axis-text: #707070;
    --chart-reference-line-stroke: #e6e6e6;
    --chart-reference-label: #707070;
    --chart-actual-line: #000000;
    --chart-forecast-line: #666666;
    --chart-tooltip-cursor: #666666;
    --chart-pattern-bg: white;
    --chart-pattern-stroke: #707070;
    --chart-bar-fill: #000000;
    --chart-bar-fill-secondary: #6666664d;
    --chart-gradient-start: #707070;
    --chart-gradient-end: #000000;
    --chart-line-secondary: #666666;
  }

  .dark {
    --background: 0, 0%, 5%;
    --foreground: 0 0% 98%;
    --card: 0, 0%, 7%;
    --card-foreground: 0 0% 98%;
    --popover: 0, 0%, 7%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 0, 0%, 7%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0, 0%, 11%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 0, 0%, 11%;
    --accent-foreground: 0 0% 98%;
    --destructive: 359, 100%, 61%;
    --destructive-foreground: 0, 0%, 100%;
    --muted-foreground: 0, 0%, 38%;
    --border: 0, 0%, 11%;
    --input: 0, 0%, 11%;
    --ring: 240 4.9% 83.9%;
    /* Chart colors */
    --chart-grid-stroke: #1d1d1d;
    --chart-axis-text: #666666;
    --chart-reference-line-stroke: #333333;
    --chart-reference-label: #666666;
    --chart-actual-line: #ffffff;
    --chart-forecast-line: #999999;
    --chart-tooltip-cursor: #999999;
    --chart-pattern-bg: #0c0c0c;
    --chart-pattern-stroke: #666666;
    --chart-bar-fill: white;
    --chart-bar-fill-secondary: #6666664d;
    --chart-gradient-start: #666666;
    --chart-gradient-end: #ffffff;
    --chart-line-secondary: #999999;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    font-family: var(--font-sans), system-ui, sans-serif;
    @apply bg-background text-foreground;
  }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

@keyframes dialog-overlay-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialog-overlay-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes dialog-content-show {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dialog-content-hide {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.97);
  }
}

.loading-ellipsis:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

/* Date picker */
.rdp-tbody .rdp-button {
  border-radius: 100%;
}

.aria-selected\:text-accent-foreground[aria-selected="true"] {
  border-radius: 0px;
}