/**
  Main Themes:
  - dark (default)
  - light
  - black
  - auto
 */

// Dark is the default theme variant.
@mixin darkTheme {
  // Background color
  --bg-color: rgba(32, 33, 36, 1);
  // Light Background color
  --bg-light-color: rgba(255, 255, 255, 0.04);
  // Dark Background color
  --bg-dark-color: rgba(0, 0, 0, 0.2);
  // Text color
  --fg-color: rgba(255, 255, 255, 0.9);
  // Light Text color
  --fg-light-color: rgba(255, 255, 255, 0.5);
  // Border color
  --brd-color: rgba(255, 255, 255, 0.05);
  // Error color
  --err-color: rgba(255, 255, 255, 0.05);
  // Acent color
  --ac-color: rgba(80, 250, 123, 1);
  // Active text color
  --act-color: rgba(32, 33, 36, 1);
  // Auto-complete color
  --atc-color: rgba(32, 33, 36, 1);
  // Tooltip color
  --tt-color: rgba(53, 53, 53, 1);
}

@mixin lightTheme {
  // Background color
  --bg-color: rgba(255, 255, 255, 1);
  // Light Background color
  --bg-light-color: rgba(0, 0, 0, 0.05);
  // Dark Background color
  --bg-dark-color: rgba(0, 0, 0, 0.02);
  // Text color
  --fg-color: rgba(0, 0, 0, 0.9);
  // Light Text color
  --fg-light-color: rgba(0, 0, 0, 0.6);
  // Border color
  --brd-color: rgba(0, 0, 0, 0.1);
  // Error color
  --err-color: rgba(0, 0, 0, 0.1);
  // Acent color
  --ac-color: rgba(80, 250, 123, 1);
  // Active text color
  --act-color: rgba(255, 255, 255, 1);
  // Auto-complete color
  --atc-color: rgba(255, 255, 255, 1);
  // Tooltip color
  --tt-color: rgba(220, 220, 220, 1);
}

@mixin blackTheme {
  // Background color
  --bg-color: rgba(0, 0, 0, 1);
  // Light Background color
  --bg-light-color: rgba(255, 255, 255, 0.02);
  // Dark Background color
  --bg-dark-color: rgba(255, 255, 255, 0.04);
  // Text color
  --fg-color: rgba(255, 255, 255, 0.9);
  // Light Text color
  --fg-light-color: rgba(255, 255, 255, 0.5);
  // Border color
  --brd-color: rgba(255, 255, 255, 0.05);
  // Error color
  --err-color: rgba(255, 255, 255, 0.05);
  // Acent color
  --ac-color: rgba(80, 250, 123, 1);
  // Active text color
  --act-color: rgba(0, 0, 0, 1);
  // Auto-complete color
  --atc-color: rgba(0, 0, 0, 1);
  // Tooltip color
  --tt-color: rgba(18, 18, 18, 1);
}

:root {
  @include darkTheme;
}

:root.light {
  @include lightTheme;
}

:root.black {
  @include blackTheme;
}

@media (prefers-color-scheme: dark) {
  :root.auto {
    @include darkTheme;
  }
}

@media (prefers-color-scheme: light) {
  :root.auto {
    @include lightTheme;
  }
}