@import '../colors.css';
@import '../variables.css';
@import './config.css';

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

  @apply --reset;
}

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

.navigationContainer {
  display: flex;

  & .navigation {
    flex: 1;
  }
}

.arrow {
  color: var(--tab-text-color);
  padding: 0 var(--tab-label-h-padding);
}

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

.label {
  color: var(--tab-text-inactive-color);
  font-size: var(--tab-text-height);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1;
  padding: var(--tab-label-v-padding) var(--tab-label-h-padding);
  position: relative;
  text-transform: uppercase;
  transition-duration: var(--animation-duration);
  transition-property: background-color, box-shadow, color;
  transition-timing-function: var(--animation-curve-default);

  &:focus {
    background-color: var(--tab-focus-color);
    outline: none;
  }

  & > .rippleWrapper {
    overflow: hidden;
  }

  &.active {
    color: var(--tab-text-color);
  }

  &.disabled {
    opacity: var(--tab-label-disabled-opacity);
  }

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

  &.hidden {
    display: none;
  }

  &.withIcon {
    padding-bottom: calc(var(--tab-label-v-padding) - var(--tab-icon-margin-bottom) / 2);
    padding-top: calc(var(--tab-label-v-padding) - var(--tab-icon-margin-bottom) / 2);
    text-align: center;
  }

  &.withText {
    & .icon {
      margin-bottom: var(--tab-icon-margin-bottom);
    }
  }
}

.icon {
  display: block;
  height: var(--tab-icon-height);
  line-height: var(--tab-icon-height);
  margin: 0 auto;
}

.pointer {
  background-color: var(--tab-pointer-color);
  height: var(--tab-pointer-height);
  margin-top: calc(-1 * var(--tab-pointer-height));
  position: absolute;
  transition-duration: var(--animation-duration);
  transition-property: left, width;
  transition-timing-function: var(--animation-curve-default);
  width: 0;
}

.tab {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--tab-label-v-padding) var(--tab-label-h-padding);
  position: relative;

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

  &.active {
    display: flex;
  }
}

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

.inverse {
  & .navigation,
  & .arrowContainer {
    background-color: var(--tab-inverse-bar-color);
  }

  & .label {
    color: var(--tab-inverse-text-inactive-color);

    &.active {
      color: var(--tab-inverse-text-color);
    }
  }

  & .arrow {
    color: var(--tab-inverse-text-color);
  }

  & .pointer {
    background-color: var(--tab-inverse-pointer-color);
  }
}