@import 'tailwindcss';

@config '../tailwind.config.js';

@layer base {
  :root {
    --shadow-custom: 0 0 5px 0 rgba(0, 0, 0, 0.02),
    0 2px 10px 0 rgba(0, 0, 0, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-custom-sm: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
    --shadow-custom-button: 0 1px 2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-custom-inner: inset 0 0 2px 0 rgba(0, 0, 0, 0.05), inset 0 0 4px 0 rgba(0, 0, 0, 0.05), inset 0 0 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-custom-cursor: 0 3px 6px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px #E1E6EC, inset 0 -5px 1px -1px rgba(0, 0, 0, 0.03);
  }

  .dark, .black-dark {
    --shadow-custom: 0 0 5px 0 rgba(0, 0, 0, 0.05),
    0 2px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 1px 0 hsla(0, 0%, 100%, 0.15),
    0 0 1px 0 rgba(255, 255, 255, 0.6);
    --shadow-custom-sm: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
    --shadow-custom-button: 0 1px 2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-custom-inner: inset 0 1px 1px 0 rgba(255, 255, 255, 0.02), inset 0 -0.5px 1px 0 rgba(255, 255, 255, 0.1), inset 1px 1.5px 4px 0 rgba(0, 0, 0, 0.08), inset 1px 1.5px 4px 0 rgba(0, 0, 0, 0.1);
    --shadow-custom-cursor: 0 3px 6px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 -5px 1px -1px rgba(255, 255, 255, 0.01), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15);
  }
}

@layer base {
  * {
    @apply border-divider ring-transparent! outline-transparent!;
  }
}

