@import "../colors";
@import "../globals";
@import "../mixins";
@import "./config";

.tabs {
  display: flex;
  flex-direction: column;
}

.navigation {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  box-shadow: inset 0 -1px $tab-navigation-border-color;
}

.navigationContainer {
  display: flex;

  .navigation {
    flex: 1;
  }
}

.arrow {
  padding: 0 $tab-label-h-padding;
  color: $tab-text-color;
}

.arrowContainer {
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: inset 0 -1px $tab-navigation-border-color;
}

.label {
  padding: $tab-label-v-padding $tab-label-h-padding;
  font-size: $tab-text-height;
  font-weight: $font-weight-semi-bold;
  line-height: 1;
  color: $tab-text-inactive-color;
  text-align: center;
  text-transform: uppercase;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: box-shadow, color;

  &.active {
    color: $tab-text-color;
  }

  &.disabled {
    opacity: $tab-label-disabled-opacity;
  }

  &:not(.disabled) {
    cursor: pointer;
  }

  &.hidden {
    display: none;
  }

  &.withIcon {
    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
  }

  &.withText {
    .icon {
      margin-bottom: $tab-icon-margin-bottom;
    }
  }
}

.icon {
  display: block;
  height: $tab-icon-height;
  margin: 0 auto;
  line-height: $tab-icon-height;
}

.pointer {
  position: absolute;
  width: 0;
  height: $tab-pointer-height;
  margin-top: - $tab-pointer-height;
  background-color: $tab-pointer-color;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: left, width;

  &.disableAnimation {
    transition: none;
  }
}

.tab {
  display: flex;
  flex-direction: column;
  padding: $tab-label-v-padding $tab-label-h-padding;

  &:not(.active) {
    display: none;
  }

  &.active {
    display: flex;
  }
}

.fixed {
  .label {
    flex: 1;
    text-align: center;
  }
}

.inverse {
  .navigation, .arrowContainer {
    background-color: $tab-inverse-bar-color;
  }

  .label {
    color: $tab-inverse-text-inactive-color;

    &.active {
      color: $tab-inverse-text-color;
    }
  }

  .arrow {
    color: $tab-inverse-text-color;
  }

  .pointer {
    background-color: $tab-inverse-pointer-color;
  }
}