@use 'inter-ui/default' as inter-ui with (
  $inter-font-display: swap,
  $inter-font-path: 'inter-ui/Inter (web)'
);
@use 'inter-ui/variable' as inter-ui-variable with (
  $inter-font-display: swap,
  $inter-font-path: 'inter-ui/Inter (web)'
);
@include inter-ui.weight-400-normal;
@include inter-ui.weight-500-normal;
@include inter-ui.weight-600-normal;
@include inter-ui.weight-700-normal;
@include inter-ui-variable.normal;

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

html,
body {
  font-family: 'Inter', 'system-ui';
}

@supports (font-variation-settings: normal) {
  html,
  body {
    font-family: 'Inter var', 'system-ui';
  }
}

body {
  font-size: 100%;
}

:focus-visible {
  outline: none;
}

@mixin light-theme {
  color-scheme: light;
  --color-primary-blue: 73 135 252; // #4987FC
  --color-secondary: 242 242 242; // #F2F2F2
  --color-primary-purple: 103 86 189; // #6756BD
  --primary-background: 255 255 255; // #FFFFFF
  --primary-text: 48 48 48; // #303030
  --secondary-text: 128 128 128; // #808080
  --light-text: 190 190 190; // #BEBEBE
  --primary-border: 237 237 237; // #EDEDED
}

@mixin dark-theme {
  color-scheme: dark;
  --color-primary-blue: 50 104 206; // #3268CE
  --color-secondary: 46 46 46; // #2E2E2E
  --color-primary-purple: 57 41 141; // #39298D
  --primary-background: 25 25 25; // #191919
  --primary-text: 223 223 223; // #DFDFDF
  --secondary-text: 127 127 127; // #7F7F7F
  --light-text: 79 79 79; // #4F4F4F
  --primary-border: 53 53 53; // #353535
}

@layer base {
  :root {
    opacity: 0.88;
  }
}

:root.light {
  @include light-theme;
  @import 'highlight.js/scss/github.scss';
}

:root.dark {
  @include dark-theme;
  @import 'highlight.js/scss/github-dark.scss';
}

.mouse-position-modal {
  min-width: 200px;
  width: 200px;
  height: auto;
  background: #ffffffe0;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: absolute;
  padding: 8px 12px;
  .mouse-position-modal-content {
    font-size: 0.8em;
    color: #262626;
  }
}
.button-rotate-180{
  transform: rotate(180deg) translateZ(0px);
}