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

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

.navigation {
  display: flex;
  flex-direction: row;
  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;
}

.tab {
  display: flex;
  flex-direction: column;
  padding: $tab-label-v-padding $tab-label-h-padding;
  &:not(.active) {
    display: none;
  }
  &.active {
    display: block;
  }
}

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

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

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

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