$theme-0-dark: $c-yellow;
$theme-0-light: $c-yellow-light;

$theme-1-dark: $c-green;
$theme-1-light: $c-green-light;

$theme-2-dark: $c-red;
$theme-2-light: $c-red-light;

$theme-3-dark: $c-blue;
$theme-3-light: $c-blue-light;

$theme-4-dark: $c-black;
$theme-4-light: $c-white;

@mixin theme($property, $color: main) {
  @if ($color == main) {
    $color: var(--theme-main-color);
  }
  @if ($color == bg) {
    $color: var(--theme-bg-color);
  }
  @if ($color == 0) {
    $color: $theme-0-dark;
  }
  @if ($color == 1) {
    $color: $theme-1-dark;
  }
  @if ($color == 2) {
    $color: $theme-2-dark;
  }
  @if ($color == 3) {
    $color: $theme-3-dark;
  }
  @if ($color == 4) {
    $color: $theme-4-dark;
  }
  @if ($color == 0_light) {
    $color: $theme-0-light;
  }
  @if ($color == 1_light) {
    $color: $theme-1-light;
  }
  @if ($color == 2_light) {
    $color: $theme-2-light;
  }
  @if ($color == 3_light) {
    $color: $theme-3-light;
  }
  @if ($color == 4_light) {
    $color: $theme-4-light;
  }
  transition: #{$property} 0.6s ease;
  #{$property}: $color;
}

@mixin theme-background-color {
  @include theme(background-color, var(--theme-bg-color));
}

@mixin theme-color {
  @include theme(color, var(--theme-main-color));
}
