.tab-box {
  height:31px;
  border-radius: 4px;
  margin:0 10px 0;

 -webkit-transform: perspective(45px) rotateX(30deg);
 -moz-transform: perspective(45px) rotateX(30deg);
 -ms-transform: perspective(45px) rotateX(30deg);

  text-align: center;
  padding-top: 5px;
}

.tab-list {
  right: 9px;
  position: relative;
  position: absolute;
  bottom: -1px;

  display: flex;
  display: -webkit-flex;
  flex-grow: 1;
  flex-flow: row-reverse;
  align-self: flex-end;
  padding-left: 16px;
  float:right;

  @media only screen and (min-width: $medium-screen) {
    padding-left: 24px;
  }
}

.tab {
  width: 126px;
  overflow:hidden;
  float:left;
  margin:0 -15px 0 0;

  position: relative;
  cursor: pointer;
  align-self: flex-end;
  height: 18px;
  margin-left: -6px;

  color: $color-console-tab-text;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;

  @media only screen and (min-width: $medium-screen) {
    height: 24px;
    margin-left: -6px;
  }

  @media only screen and (min-width: $large-screen) {
    height: 27px;
  }
}

.tab-label {
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: center;
  padding-top: 6px;

  font-size: 11px;
  font-weight: 900;
  text-align: center;

  @media only screen and (min-width: $medium-screen) {
    font-size: 12px;
    font-weight: 700;
  }

  @media only screen and (min-width: $large-screen) {
    font-size: 14px;
  }
}

.tab-image {
  width: 82px;
  height: 100%;

  @media only screen and (min-width: $medium-screen) {
    width: 112px;
  }

  @media only screen and (min-width: $large-screen) {
    width: 126px;
  }
}

.tab-get::before {
  background: $color-console-tab-get;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-put::before {
  background: $color-console-tab-put;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-delete::before {
  background: $color-console-tab-delete;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-post::before {
  background: $color-console-tab-post;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-patch::before {
  background: $color-console-tab-patch;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-connect::before {
  background: $color-console-tab-connect;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-head::before {
  background: $color-console-tab-head;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-options::before {
  background: $color-console-tab-options;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab-trace::before {
  background: $color-console-tab-trace;
  content: '';
  height: 45px;
  border-radius: 4px;
  margin: -1px 10px 0;
  -webkit-transform: perspective(45px) rotateX(30deg);
  -moz-transform: perspective(45px) rotateX(30deg);
  -ms-transform: perspective(45px) rotateX(30deg);
  width: 108px;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 0px;
}

.tab:hover,
.resource:not(.is-active) .tab.is-hovered {
  .tab-get::before {
    background: $color-console-tab-get-hover;
  }

  .tab-put::before {
    background: $color-console-tab-put-hover;
  }

  .tab-delete::before {
    background: $color-console-tab-delete-hover;
  }

  .tab-post::before {
    background: $color-console-tab-post-hover;
  }

  .tab-patch::before {
    background: $color-console-tab-patch-hover;
  }

  .tab-connect::before {
    background: $color-console-tab-connect-hover;
  }

  .tab-head::before {
    background: $color-console-tab-head-hover;
  }

  .tab-options::before {
    background: $color-console-tab-options-hover;
  }

  .tab-trace::before {
    background: $color-console-tab-trace-hover;
  }
}

.tab.is-active {
  z-index: 5;

  color: $color-console-tab-active;
}

.tab.is-active .tab-get::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-post::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-put::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-patch::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-delete::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-trace::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-options::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-head::before {
  background: $color-console-tab-active-bg;
}

.tab.is-active .tab-connect::before {
  background: $color-console-tab-active-bg;
}
