@import '../../../styles/core.scss';

$basic: get(color 'graphite');
$cnnct: darken(get(color 'blue'), 10%);
$delete: get(color 'red');
$error: darken(get(color 'red'), 10%);
$fn: #fb3cbb; // pink
$head: get(color 'slate');
$get: get(color 'green');
$link: #20c2d2; // teal
$options: darken(get(color 'yellow'), 5%);
$patch: #ff8e02; // orange
$post: get(color 'blue');
$put: get(color 'purple');
$trace: get(color 'shale');

$colorNames: basic cnnct delete error fn head get link options patch post put trace;
$colorCodes:  $basic, $cnnct, $delete, $error, $fn, $head, $get, $link, $options, $patch, $post, $put, $trace;

.Method {
  border-radius: 3px;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
  padding: 2px 4px;
  text-align: center;
  text-transform: uppercase;

  @for $i from 1 to 13 {
    &_#{nth($colorNames, $i)} {
      background: nth($colorCodes, $i);
      box-shadow: inset 0 -1px 0 darken(nth($colorCodes, $i), 2%);
      text-shadow:
        1px 1px 0px darken(nth($colorCodes, $i), 3%),
        0 1px 0 darken(nth($colorCodes, $i), 3%),
        1px 0 0 darken(nth($colorCodes, $i), 3%);
    }
  }
}