@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-tabs-color: $ink-color-text !default;
$ink-tabs-color-active: $ink-color-brand !default;
$ink-tabs-font-size: $ink-font-size-md !default;
$ink-tabs-bg-color: $ink-color-bg !default;
$ink-tabs-header-item-height: 92px !default;

.ink-tabs {
  width: 100%;
  height: 100%;

  &__header {
    display: flex;
    align-items: center;
    position: relative;
    background: $ink-tabs-bg-color;

    &-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      padding: 0 $ink-spacing-sm;
      height: $ink-tabs-header-item-height;
      color: $ink-tabs-color;
      font-size: $ink-tabs-font-size;
      white-space: nowrap;

      &--scroll {
        min-width: 22%;
        flex: 1 0 auto;
      }

      &--active {
        color: $ink-tabs-color-active;
        position: relative;

        &::after {
          position: absolute;
          content: '';
          width: 56px;
          height: 6px;
          bottom: 10px;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          background-color: $ink-tabs-color-active;
          border-radius: 4px;
        }
      }
    }
  }

  &__body {
    &--animated {
      overflow: hidden;
    }
  }

  &__track {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    will-change: left;
  }

  &__pane {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;

    &--inactive {
      height: 0;
      overflow: hidden;
    }
  }
}