.qx-tabs > ul,
.qx-accordion > ul {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
}

.qx-tabs .qx-tabs-button,
.qx-accordion .qx-accordion-button {
  cursor: pointer;
}

.qx-tabs .qx-tabs-button > button[disabled],
.qx-accordion .qx-accordion-button > button[disabled] {
  color: $highlight-color-disabled;
}

.qx-tabs .qx-tabs-button-active,
.qx-accordion .qx-accordion-button-active {
  @include background($background-color);
}

.qx-tabs .qx-tabs-button > button,
.qx-accordion .qx-accordion-button > button {
  color: $highlight-color;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  padding: rem(8) rem(12);
  font-size: rem(13);
}

.qx-tabs .qx-tabs-button > button:focus,
.qx-accordion .qx-accordion-button > button:focus {
  text-decoration: underline;
}

.qx-tabs .qx-tabs-button:hover,
.qx-accordion .qx-accordion-button:hover {
  background-color: darken($background-color, 10%);
}

.qx-tabs .qx-tabs-button-active:hover,
.qx-accordion .qx-accordion-button-active:hover {
  @include background($background-color);
}

.qx-tabs .qx-tabs-button-active > button,
.qx-accordion .qx-accordion-button-active > button {
  color: black;
}

.qx-tabs .qx-tabs-button[disabled],
.qx-qccordion .qx-qccordion-button[disabled] {
  color: $highlight-color-disabled;
}

.qx-tabs .qx-tabs-page,
.qx-accordion .qx-accordion-page {
  padding: rem(10);
  @include user-select(text);
  background-color: white;
}

// horizontal orientation:

.qx-tabs-horizontal > ul > .qx-tabs-button:first-child {
  margin-left: rem(0);
}

.qx-tabs-horizontal > ul > .qx-tabs-button {
  margin-bottom: rem(-1);
  margin-left: rem(3);
  border: rem(1) solid transparent;
}

.qx-tabs-horizontal > ul > .qx-tabs-button-active {
  border: rem(1) solid $border-color;
  @include border-radius(rem(2) rem(2) 0 0);
}

.qx-tabs-horizontal > ul > .qx-tabs-button-active:after {
  display: block;
  position: relative;
  top: rem(1);
  content: " ";
  background-color: $background-color;
  width: 100%;
  height: rem(1);
}

.qx-tabs-horizontal > ul > .qx-tabs-button:hover {
  border-bottom: rem(1) solid $border-color;
  @include border-radius(rem(2) rem(2) 0 0);
}

.qx-tabs-horizontal > ul > .qx-tabs-button-active:hover {
  border: rem(1) solid $border-color;
  border-bottom: rem(1) solid $background-color;
}

.qx-tabs-horizontal > .qx-tabs-container {
  clear: both;
  border: rem(1) solid $border-color;
}

.qx-tabs-horizontal > ul > .qx-tabs-button.qx-flex1 {
  text-align: center;
}

// IE < 10 horzontal orientation :

.qx-tabs-horizontal.qx-tabs-justify > ul,
.qx-tabs-horizontal.qx-tabs-right > ul,
.qx-tabs-horizontal.qx-tabs-left > ul {
  display: table-row;
}

.qx-tabs-horizontal.qx-tabs-justify > ul > .qx-tabs-button,
.qx-tabs-horizontal.qx-tabs-right > ul > .qx-tabs-button,
.qx-tabs-horizontal.qx-tabs-left > ul > .qx-tabs-button {
  display: table-cell;
  text-align: center;
  border-bottom-color: transparent;
  position: relative;
  @include transform(translate(0,rem(1.2)));
}

.qx-tabs-horizontal.qx-tabs-justify > ul > .qx-tabs-button {
  width: 1%;
}

.qx-tabs-horizontal.qx-tabs-right ul {
  float: right;
  margin: 0;
}

// vertical orientation:

.qx-tabs-vertical,
.qx-accordion-vertical {
  border-right: rem(1) solid $border-color;
  border-bottom: rem(1) solid $border-color;
  border-left: rem(1) solid $border-color;
}

.qx-tabs-vertical .qx-tabs-button,
.qx-accordion-vertical .qx-accordion-button {
  margin-left: 0;
  border-top: rem(1) solid $border-color;
}

.qx-tabs-vertical .qx-tabs-button > button,
.qx-accordion-vertical .qx-accordion-button > button {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: left;
}

.qx-tabs-vertical .qx-tabs-page,
.qx-accordion-vertical .qx-accordion-page {
  overflow: hidden;
  @include box-sizing(border-box);
  padding: rem(8) rem(12);
  @include transition(height 500ms, padding-top 500ms, padding-bottom 500ms, margin-top 500ms, margin-bottom 500ms);
}