*[theme],
*[subtheme] {
  --color-bg: #fff;
  --color-font: #555;

  --color-success: #50a500;
  --color-notice: #b59e00;
  --color-warning: #da7c02;
  --color-danger: #d04845;
  --color-surprise: #8570d2;
  --color-info: #0092bf;

  --color-font-success: #fff;
  --color-font-notice: #fff;
  --color-font-warning: #fff;
  --color-font-danger: #fff;
  --color-font-surprise: #fff;
  --color-font-info: #fff;

  --hl-xxs: rgba(130, 130, 130, 0.05);
  --hl-xs: rgba(130, 130, 130, 0.1);
  --hl-sm: rgba(130, 130, 130, 0.25);
  --hl-md: rgba(130, 130, 130, 0.35);
  --hl-lg: rgba(130, 130, 130, 0.5);
  --hl-xl: rgba(130, 130, 130, 0.8);
  --hl: rgba(130, 130, 130, 1);

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

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

@hl-xxs: var(--hl-xxs);
@hl-xs: var(--hl-xs);
@hl-sm: var(--hl-sm);
@hl-md: var(--hl-md);
@hl-lg: var(--hl-lg);
@hl-xl: var(--hl-xl);
@hl: var(--hl);

[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;
}

.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-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);
}
