:root {
  --background-color: #{$background-color};
  --background-color-secondary: #{$background-color-secondary};

  --font-color: #{$font-color};
  --link-color: #{$link-color};
  --selected-color: #{$selected-color};

  --confirm-color: #{$confirm-color};
  --confirm-font-color: #{$confirm-font-color};

  --danger-color: #{$danger-color};
  --danger-font-color: #{$danger-color};

  --warning-color: #{$warning-color};
  --warning-font-color: #{$warning-color};

  --info-color: #{$info-color};
  --info-font-color: #{$info-color};

  --border-color: #{$border-color};

  &.dark-theme {
    --background-color: #{$dark-background-color};
    --background-color-secondary: #{$dark-background-color-secondary};

    --font-color: #{$dark-font-color};
    --link-color: #{$dark-link-color};

    --confirm-color: #{$dark-confirm-color};
    --confirm-font-color: #{$dark-confirm-font-color};

    --danger-color: #{$dark-danger-color};
    --warning-color: #{$dark-warning-color};
    --info-color: #{$dark-info-color};
  }

  color: var(--font-color);
  background-color: var(--background-color);
}
