@import 'tailwind.css';
@import 'radix-animations.css';

html, body {
  width: 100%;
  min-width: 320px !important;
  background-color: rgba(var(--bg-background)) !important;
  color: rgba(var(--text-primary));
  -webkit-font-smoothing: antialiased;
  --light-bg-background: 238, 238, 238;
  --light-bg-secondary: 230, 230, 230;
  --light-bg-tertiary: 220, 220, 220;
  --light-bg-quaternary: 210, 210, 210;
  --light-text-primary: 36, 42, 49;
  --light-text-secondary: 73, 80, 87;
  --light-text-tertiary: 108, 117, 125;
  --light-text-placeholder: 133, 138, 141;
  --light-border-primary: 204, 204, 204;
  --dark-bg-background: 15, 15, 20;
  --dark-bg-secondary: 22, 22, 30;
  --dark-bg-tertiary: 30, 30, 40;
  --dark-bg-quaternary: 40, 40, 50;
  --dark-text-primary: 235, 235, 245;
  --dark-text-secondary: 200, 200, 210;
  --dark-text-tertiary: 160, 160, 170;
  --dark-text-placeholder: 130, 130, 140;
  --dark-border-primary: 34, 34, 47;
}

html {
  --bg-background: var(--light-bg-background);
  --bg-secondary: var(--light-bg-secondary);
  --bg-tertiary: var(--light-bg-tertiary);
  --bg-quaternary: var(--light-bg-quaternary);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-tertiary: var(--light-text-tertiary);
  --text-placeholder: var(--light-text-placeholder);
  --border-primary: var(--light-border-primary);
}

html.dark {
  --bg-background: var(--dark-bg-background);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-tertiary: var(--dark-bg-tertiary);
  --bg-quaternary: var(--dark-bg-quaternary);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-tertiary: var(--dark-text-tertiary);
  --text-placeholder: var(--dark-text-placeholder);
  --border-primary: var(--dark-border-primary);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--bg-tertiary));
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(var(--bg-background));
  border-radius: 10px;
}

::selection {
  background-color: #4e92ff;
  color: #e3eeff;
}

.apexcharts-tooltip {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.apexcharts-toolbar {
  display: none !important;
}

[data-rmiz-modal-img] {
  border-radius: 0.5rem !important;
}
[data-rmiz-modal-overlay] {
  transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}
[data-rmiz-modal-overlay="visible"] {
  background-color: rgba(var(--dark-bg-background), 0.85) !important;
  backdrop-filter: blur(5px) !important;
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* styles.css */
.ScrollAreaRoot {
  width: 100%;
  height: 100%;
}

.ScrollAreaViewport {
  width: 100%;
  height: 100%;
}

.ScrollAreaScrollbar {
  width: 4px;
  padding: 5px 2px;
}

.ScrollAreaThumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

[id^="rmiz-modal-img-"] {
  border-radius: 12px;
}

iframe {
  overflow: hidden;
  border: 0;
}

/*
  Fix layout being shifted when using radix-ui.
  Stolen from https://www.reddit.com/r/reactjs/comments/1fjcwkh/comment/mdw3ohu 😜
*/
body[data-scroll-locked][data-scroll-locked] {
  overflow: auto !important;
}

body[data-scroll-locked] {
  margin-right: 0 !important;
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23blur)"/></svg>') top left / 0 no-repeat;
  mask-origin: content-box;
  animation: theme-change-animation 1s;
  transform-origin: top left;
}

::view-transition-old(root), .dark::view-transition-old(root) {
  animation: theme-change-animation 1s;
  transform-origin: top left;
  z-index: -1;
}

@keyframes theme-change-animation {
  to {
    mask-size: 350vmax;
  }
}