@import '../colors';
@import 'mixin';
@import '../variables'; //global variables
@import './variables'; //Tabs variables

.tix-tab-btn.v4 {
  cursor: pointer;
  display: inline-block;
  position: relative;

  // border bottom, needed when has overflow
  &::after {
    @include border-bottom;
  }

  &:first-child {
    button.tix-button.v4 {
      padding-left: $tab-edge-padding;
    }

    .tab-indicator {
      left: $tab-edge-padding;
    }
  }

  &:last-child {
    button.tix-button.v4 {
      padding-right: $tab-edge-padding;
    }

    .tab-indicator {
      right: $tab-edge-padding;
    }
  }

  .tab-indicator {
    display: block;
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background-color: $color-B400;
    opacity: 0;
    transition: #{$animation-duration/4}ms transform
      cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    z-index: 1;

    @at-root {
      .selected#{&} {
        opacity: 1;
        transform: translateX(0%) scaleX(1) !important;
      }
      .invert.selected#{&} {
        background-color: $color-N0;
      }
    }
  }

  .tab-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    height: 24px;
    width: 24px;
  }

  .tab-title {
    display: inline-block;
    vertical-align: middle;
  }

  button.tix-button.v4 {
    border-radius: 0px;
    height: 52px;
    padding: 0px 12px;
    line-height: 20px;

    .tix-font.v4 {
      color: $color-N600;
    }

    &.disabled {
      .tab-btn-content {
        color: $color-N300;

        @at-root {
          .invert#{&} {
            opacity: 0.3;
          }
        }
      }
    }

    .tab-btn-content {
      @at-root {
        .selected#{&} {
          color: $color-B400;

          &:hover {
            opacity: 1;
          }
        }
      }

      @at-root {
        .invert#{&} {
          color: $color-N600;
        }

        .invert.selected#{&} {
          color: $color-N0;
        }
      }
    }
  }
}