*[theme],
*[subtheme] {
  // Defaults just so we have something to start with. This
  // ensures that the UI is still usable if we making a change
  // that breaks the theme system during development.
  --color-bg: #fff;
  --color-font: #000;

  --opacity-subtle: 0.7;
  --opacity-super-subtle: 0.5;

  .theme--transparent-overlay {
    --color-bg: rgba(5, 5, 5, 0.7);
    --color-font: #ddd;
  }
}

[class^='http-method-'],
[class*=' http-method-'] {
  // Default method color
  color: var(--color-font);
}

.success,
.http-method-POST {
  color: var(--color-success) !important;
}

.notice,
.http-method-PATCH {
  color: var(--color-notice) !important;
}

.method-grpc {
  color: #2FA3A3 !important;
}

.warning,
.http-method-PUT {
  color: var(--color-warning) !important;
}

.danger,
.http-method-DELETE {
  color: var(--color-danger) !important;
}

.info,
.http-method-OPTIONS,
.http-method-HEAD {
  color: var(--color-info) !important;
}

.surprise,
.http-method-GQL,
.http-method-GET {
  color: var(--color-surprise) !important;
}

.boring {
  color: var(--color-font) !important;
}

.bg-default {
  background: var(--color-bg);
}

.bg-success,
.bg-http-method-POST {
  background: var(--color-success) !important;
  text-shadow: 0 0 0.05em var(--color-success);
  color: var(--color-font-success) !important;
}

.bg-notice,
.bg-http-method-PATCH {
  background: var(--color-notice) !important;
  text-shadow: 0 0 0.05em var(--color-notice);
  color: var(--color-font-notice) !important;
}

.bg-warning,
.bg-http-method-PUT {
  background: var(--color-warning) !important;
  text-shadow: 0 0 0.05em var(--color-warning);
  color: var(--color-font-warning) !important;
}

.bg-danger,
.bg-http-method-DELETE {
  background: var(--color-danger) !important;
  text-shadow: 0 0 0.05em var(--color-danger);
  color: var(--color-font-danger) !important;
}

.text-danger {
  color: var(--color-danger);
}

.bg-info,
.bg-http-method-OPTIONS,
.bg-http-method-HEAD {
  background: var(--color-info) !important;
  text-shadow: 0 0 0.05em var(--color-info);
  color: var(--color-font-info) !important;
}

.bg-surprise,
.bg-http-method-GET {
  background: var(--color-surprise) !important;
  text-shadow: 0 0 0.05em var(--color-surprise);
  color: var(--color-font-surprise) !important;
}

.font-error {
  color: var(--color-danger);
}
