[theme='photon-dark'],
[theme='photon-dark'] ::before,
[theme='photon-dark'] ::after {
  --gray-000: #0c0c0d;
  --gray-100: #0c0c0d;
  --gray-200: #232326;
  --border-shadow-color: rgba(35, 35, 38, 0.2);
  --gray-300: #38383d;
  --gray-400: #4a4a4f;
  --gray-600: #737373;
  --gray-700: #b1b1b3;
  --bg-white: var(--gray-200);
  --bg-gray: #2a2a2e;
  --bg-gray-light: var(--bg-gray);
  --border-gray: var(--gray-300);
  --border-gray-dark: var(--border-gray);
  --text-gray: #ededf0;
  --text-gray-dark: #d7d7db;
  --text-blue: #45a1ff;
  --bg-blue-light: #182030;
  --black-fade-15: rgba(#fff, 0.15);
  --black-fade-30: rgba(#fff, 0.3);
  --button-normal: #0a84ff;
  --button-hover: #003eaa;
  --button-pressed: #002275;
}

[theme='photon-dark'] .btn-primary {
  background: var(--button-normal);
  border: 0;
  color: var(--text-gray);
}

[theme='photon-dark'] .btn-primary:hover {
  background: var(--button-hover);
}

[theme='photon-dark'] .btn-primary:active {
  background: var(--button-pressed);
}

[theme='photon-dark'] .btn-primary:focus {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

[theme='photon-dark'] .btn-primary:disabled {
  background: var(--button-normal);
  opacity: 0.4;
}

[theme='photon-dark'] img {
  filter: brightness(80%);
}
