body {
  // Default Pretty Background Colors
  --color-success: #59a210;
  --color-notice: #ae9602;
  --color-warning: #d07502;
  --color-danger: #d04444;
  --color-surprise: #7d69cb;
  --color-info: #1c90b4;
  --color-boring: #333;

  // Default Pretty Foreground Colors
  --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(140, 140, 140, 0.05);
  --hl-xs: rgba(140, 140, 140, 0.1);
  --hl-sm: rgba(140, 140, 140, 0.2);
  --hl-md: rgba(140, 140, 140, 0.3);
  --hl-lg: rgba(140, 140, 140, 0.5);
  --hl-xl: rgba(140, 140, 140, 0.8);
  --hl: rgba(140, 140, 140, 1);

  // Default Colors
  --color-bg: #fff;
  --color-font: #555;

  .theme--overlay {
    --color-bg: rgba(30, 30, 30, 0.8);
    --color-font: #ddd;
  }
}

*[theme="default"] {
  --hl-xxs: rgba(130, 130, 130, 0.05);
  --hl-xs: rgba(130, 130, 130, 0.1);
  --hl-sm: rgba(130, 130, 130, 0.2);
  --hl-md: rgba(130, 130, 130, 0.3);
  --hl-lg: rgba(130, 130, 130, 0.5);
  --hl-xl: rgba(130, 130, 130, 0.8);
  --hl: rgba(130, 130, 130, 1);

  --color-success: #59a210;
  --color-notice: #ae9602;
  --color-warning: #d07502;
  --color-danger: #d04444;
  --color-surprise: #7461bd;
  --color-info: #1c90b4;

  .sidebar,
  .pane__body {
    --color-success: #8ccf3b;
    --color-notice: #ead950;
    --color-warning: #ff9a1f;
    --color-danger: #ff5d4b;
    --color-surprise: #a896ff;
    --color-info: #46c1e6;
  }

  // Make the tags a little lighter
  .pane__header .tag {
    --color-font: #666;
    --color-success: #75ba24;
    --color-notice: #d8c84d;
    --color-warning: #ec8702;
    --color-danger: #ee5655;
    --color-surprise: #a590ff;
    --color-info: #22c1ee;
  }

  .sidebar__header {
    --color-bg: #695eb8;
    --color-font: #fff;
  }

  .pane__header,
  .theme--dropdown__menu,
  .modal {
    --color-bg: #fff;
    --color-font: #555;
  }

  .modal__header {
    --color-bg: #eff0ed;
    --color-font: #444;
  }

  .sidebar {
    --color-bg: #2e2f2b;
    --color-font: #e0e0e0;
    --hl: #999;
  }

  .request-pane,
  .response-pane {
    --color-bg: #282925;
    --color-font: #ddd;
  }
}

*[theme="purple"] {
  --color-bg: #fff;
  --color-font: #555;

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

  // Light Parts
  .request-pane,
  .response-pane,
  .theme--dropdown__menu,
  .modal {
    --hl-xxs: rgba(130, 130, 130, 0.05);
    --hl-xs: rgba(130, 130, 130, 0.1);
    --hl-sm: rgba(130, 130, 130, 0.2);
    --hl-md: rgba(130, 130, 130, 0.3);
    --hl-lg: rgba(130, 130, 130, 0.5);
    --hl-xl: rgba(130, 130, 130, 0.8);
    --hl: rgba(130, 130, 130, 1);
  }

  .request-pane .pane__body,
  .request-pane .pane__header {
    border-left: 0;
  }

  .sidebar {
    --color-success: #a9ea6e;
    --color-notice: #ffdb02;
    --color-warning: #ffac49;
    --color-danger: #ff7472;
    --color-surprise: #c5bbff;
    --color-info: #75ddff;

    --color-bg: #695eb8;
    --color-font: #fff;

    --hl-xxs: rgba(207, 190, 255, 0.05);
    --hl-xs: rgba(207, 190, 255, 0.1);
    --hl-sm: rgba(207, 190, 255, 0.2);
    --hl-md: rgba(207, 190, 255, 0.3);
    --hl-lg: rgba(207, 190, 255, 0.5);
    --hl-xl: rgba(207, 190, 255, 0.8);
    --hl: rgb(217, 204, 255);
  }

  .tag {
    --hl: rgb(102, 99, 112);
    --hl-sm: rgba(240, 235, 255, 0.3);
  }

  .sidebar__header {
    --color-font: #eee;
  }

  .pane {
    --color-bg: #fafaff;
  }

  .theme--dropdown__menu {
    --color-bg: #fff;
    --color-font: #666;
  }

  .theme--overlay {
    --color-bg: rgba(243, 242, 250, 0.8);
    --color-font: #555;
  }
}

*[theme="dark"] {
  --color-success: #83c438;
  --color-notice: #d8c84d;
  --color-warning: #f48d02;
  --color-danger: #ff5b5a;
  --color-surprise: #9886ff;
  --color-info: #22c1ee;

  --color-bg: #232421;
  --color-font: #ddd;

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

  .tag {
    --color-success: #6ea932;
    --color-notice: #d0c14a;
    --color-warning: #d77802;
    --color-danger: #dc5251;
    --color-surprise: #8f7cdf;
    --color-info: #329fbf;
  }

  .theme--overlay {
    --color-bg: rgba(20, 20, 20, 0.8);
    --color-font: #ddd;
  }

  .theme--dropdown__menu,
  .modal {
    --color-bg: #282925;
  }

  .sidebar__header {
    --color-font: #ccc;
  }

  .theme--dropdown__menu {
    --color-font: #aaa;
  }
}

*[theme="light"] {
  --color-success: #59a210;
  --color-notice: #ae9602;
  --color-warning: #d07502;
  --color-danger: #d04444;
  --color-surprise: #7d69cb;
  --color-info: #1c90b4;

  &, .dropdown {
    --color-bg: #fff;
    --color-font: #333;
  }

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

  .theme--overlay {
    --color-bg: rgba(255, 255, 255, 0.8);
    --color-font: #333;
  }
}

*[theme="solarized-light"] {
  --color-success: #859900;
  --color-notice: #b58900;
  --color-warning: #cb4b16;
  --color-danger: #dc322f;
  --color-surprise: #6c71c4;
  --color-info: #2aa198;

  --color-bg: #fdf6e3;
  --color-font: #657b83;

  --hl-xxs: rgba(159, 167, 164, 0.05);
  --hl-xs: rgba(159, 167, 164, 0.1);
  --hl-sm: rgba(159, 167, 164, 0.2);
  --hl-md: rgba(142, 149, 146, 0.3);
  --hl-lg: rgba(142, 149, 146, 0.6);
  --hl-xl: rgba(142, 149, 146, 0.8);
  --hl: rgb(142, 149, 146);

  .theme--overlay {
    --color-bg: rgba(238, 231, 213, 0.8);
    --color-font: #657b83;
  }

  .theme--dropdown__menu,
  .modal {
    --color-bg: #fff8e5;
  }
}

*[theme="solarized-dark"] {
  --color-success: #859900;
  --color-notice: #b58900;
  --color-warning: #cb4b16;
  --color-danger: #dc322f;
  --color-surprise: #6c71c4;
  --color-info: #2aa198;

  --color-bg: #002b36;
  --color-font: #8ea0a2;

  --hl-xxs: rgba(91, 118, 133, 0.05);
  --hl-xs: rgba(91, 118, 133, 0.1);
  --hl-sm: rgba(91, 118, 133, 0.2);
  --hl-md: rgba(91, 118, 133, 0.3);
  --hl-lg: rgba(91, 118, 133, 0.6);
  --hl-xl: rgba(91, 118, 133, 0.8);
  --hl: rgb(91, 118, 133);

  .theme--overlay {
    --color-bg: rgba(0, 31, 41, 0.8);
    --color-font: #8ea0a2;
  }

  .theme--dropdown__menu,
  .modal {
    --color-bg: #073642;
  }
}

*[theme="material"] {
  --color-bg: #263238;
  --color-font: #dde1e1;

  --color-success: #80CBC4;
  --color-notice: #FFCB6B;
  --color-warning: #F77669;
  --color-danger: #ff5370;
  --color-surprise: #c792ea;
  --color-info: #82B1FF;

  --hl-xxs: rgba(114, 145, 143, 0.05);
  --hl-xs: rgba(114, 145, 143, 0.1);
  --hl-sm: rgba(114, 145, 143, 0.2);
  --hl-md: rgba(114, 145, 143, 0.3);
  --hl-lg: rgba(114, 145, 143, 0.6);
  --hl-xl: rgba(114, 145, 143, 0.8);
  --hl: rgb(114, 145, 143);

  .tag {
    --color-success: #68a9a2;
    --color-notice: #e6b564;
    --color-warning: #e27164;
    --color-danger: #d64b66;
    --color-surprise: #b482d6;
    --color-info: #6c93d8;
  }

  a {
    --color-surprise: #68a9a2;
  }

  .modal > *,
  .theme--dropdown__menu {
    --color-bg: #303c43;
    --color-font: #dde1e1;
  }

  .ReactTabs > *,
  .pane > *,
  .modal,
  .sidebar {
    --hl-xxs: rgba(114, 145, 143, 0.0);
    --hl-xs: rgba(114, 145, 143, 0.0);
    --hl-sm: rgba(114, 145, 143, 0.0);
    --hl-md: rgba(114, 145, 143, 0.0);
    --hl-lg: rgba(114, 145, 143, 0.1);
    --hl-xl: rgba(114, 145, 143, 0.1);
    --hl: rgb(125, 153, 151);
  }

  .sidebar {
    --color-bg: #1f2b31;
  }

  input,
  textarea,
  table,
  .sidebar__item,
  .btn,
  .tag,
  .theme--dropdown__menu,
  .CodeMirror,
  .pane__body,
  .modal__header,
  .sidebar__header,
  .form-control {
    --hl-xxs: rgba(114, 145, 143, 0.05);
    --hl-xs: rgba(114, 145, 143, 0.08);
    --hl-sm: rgba(114, 145, 143, 0.1);
    --hl-md: rgba(114, 145, 143, 0.2);
    --hl-lg: rgba(114, 145, 143, 0.4);
    --hl-xl: rgba(114, 145, 143, 0.5);
  }

  .pane__body,
  .pane__header,
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb {
    --hl-xxs: rgba(114, 145, 143, 0.05);
    --hl-xs: rgba(114, 145, 143, 0.08);
    --hl-sm: rgba(114, 145, 143, 0.1);
    --hl-md: rgba(114, 145, 143, 0.15);
    --hl-lg: rgba(114, 145, 143, 0.2);
    --hl-xl: rgba(114, 145, 143, 0.2);
  }

  .theme--overlay {
    --color-bg: rgba(29, 39, 44, 0.8);
  }
}

*[theme="solarized"] {
  --color-success: #859900;
  --color-notice: #b58900;
  --color-warning: #cb4b16;
  --color-danger: #dc322f;
  --color-surprise: #6c71c4;
  --color-info: #2aa198;

  --color-bg: #fdf6e3;
  --color-font: #657b83;

  --hl-xxs: rgba(159, 167, 164, 0.05);
  --hl-xs: rgba(159, 167, 164, 0.1);
  --hl-sm: rgba(159, 167, 164, 0.2);
  --hl-md: rgba(142, 149, 146, 0.3);
  --hl-lg: rgba(142, 149, 146, 0.6);
  --hl-xl: rgba(142, 149, 146, 0.8);
  --hl: rgb(142, 149, 146);

  .theme--overlay {
    --color-bg: rgba(238, 231, 213, 0.8);
  }

  .theme--dropdown__menu,
  .modal {
    --color-bg: #fff8e5;
    --color-font: #657b83;
  }

  .pane__header {
    --color-bg: #faf4e0;
  }

  .sidebar__header {
    --color-bg: #073440;
  }

  .sidebar {
    --color-bg: #073642;
    --color-font: #8ea0a2;

    --hl-xxs: rgba(91, 127, 143, 0.05);
    --hl-xs: rgba(91, 127, 143, 0.1);
    --hl-sm: rgba(91, 127, 143, 0.2);
    --hl-md: rgba(91, 127, 143, 0.3);
    --hl-lg: rgba(91, 127, 143, 0.6);
    --hl-xl: rgba(91, 127, 143, 0.8);
    --hl: rgb(98, 127, 143);
  }

}

*[theme="railscasts"] {
  --color-success: #a5c261;
  --color-notice: #ffc66d;
  --color-warning: #cc7833;
  --color-danger: #da4939;
  --color-surprise: #b6b3eb;
  --color-info: #6d9cbe;

  --color-bg: #2b2b2b;
  --color-font: #e1deda;

  --hl-xxs: rgba(120, 120, 120, 0.05);
  --hl-xs: rgba(120, 120, 120, 0.09);
  --hl-sm: rgba(120, 120, 120, 0.15);
  --hl-md: rgba(120, 120, 120, 0.25);
  --hl-lg: rgba(120, 120, 120, 0.4);
  --hl-xl: rgba(120, 120, 120, 0.7);
  --hl: rgba(130, 130, 130, 1);

  .theme--overlay {
    --color-bg: rgba(30, 30, 30, 0.8);
    --color-font: #e1deda;
  }

  .theme--dropdown__menu,
  .modal {
    --color-bg: #323232;
  }
}

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