@import './fonts.css';

/* TODO remove important */
@layer theme, base, mui, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities) important;

:root {
  --zodiac: #1b2559;
  --spring: #48f694;
  --spring2: #44e188;
  --spring3: #ecfbef;
  --spring4: #3fd07e;

  --comet: #5f668a;
  --comet2: #72799d;
  --comet3: #525772;

  --tomato: #ff584a;
  --misty-rose: #ffeceb;

  --dust: #dddddd;
  --ghost: #fafbff;
  --zircon: #ebefff;
  --zircon2: #dbdfed;

  --java: #16d6d3;
  --neon: #5a67ff;
  --malachite: #00cd5a;
  --orange-yellow: #ffcc00;

  --mont: 'Mont';
  --museo: 'MuseoSans';
  --bpmono: 'BPmono';
}

@theme {
  --color-zodiac: var(--zodiac);
  --color-spring: var(--spring);
  --color-spring2: var(--spring2);
  --color-spring3: var(--spring3);
  --color-spring4: var(--spring4);
  --color-comet: var(--comet);
  --color-comet2: var(--comet2);
  --color-comet3: var(--comet3);
  --color-tomato: var(--tomato);
  --color-misty-rose: var(--misty-rose);
  --color-dust: var(--dust);
  --color-ghost: var(--ghost);
  --color-zircon: var(--zircon);
  --color-zircon2: var(--zircon2);
  --color-java: var(--java);
  --color-neon: var(--neon);
  --color-malachite: var(--malachite);
  --color-orange-yellow: var(--orange-yellow);
  --font-mont: var(--mont);
  --font-museo: var(--museo);
  --font-bpmono: var(--bpmono);
}

@utility col-span-all {
  column-span: all;
}

@utility linebreak-anywhere {
  line-break: anywhere;
}

body {
  font-size: 0.875rem;
  width: 1200px;
  color: var(--zodiac);
  display: flex;
  min-height: 100%;
  @media screen and (min-width: 1200px) {
    width: auto;
  }
}

html {
  height: 100%;
  @media screen and (max-height: 900px) {
    scrollbar-gutter: stable;
  }
}

#root {
  width: 100%;
  min-height: 100%;
}

.root-notifcenter-open {
  /*for when notification center is open*/
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.body-notifcenter-open {
  /*for when notification center is open*/
  overflow: hidden;
}

.root-blur {
  filter: blur(1px);
  pointer-events: none;
}

a::-moz-focus-inner,
input[type='submit']::-moz-focus-inner,
input[type='button']::-moz-focus-inner {
  border: 0;
}

a::-moz-focus-inner,
input[type='submit']::-moz-focus-inner,
input[type='button']::-moz-focus-inner {
  border: 0;
}

a,
a:visited,
a:focus,
a:active,
a:hover {
  outline: 0 none;
}

button::-moz-focus-inner {
  border: 0;
}

/*forcing styling onto inner container*/
.ReactVirtualized__Grid__innerScrollContainer {
  overflow: inherit !important;
}

.ReactVirtualized__Grid.ReactVirtualized__List {
  overflow-y: auto !important;
}
