@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-tabs-default-color: var(--xzx-color-primary);
  --xzx-tabs-line-height: 44px;
  --xzx-tabs-card-height: 30px;
  --xzx-tabs-nav-background: var(--xzx-color-white);
  --xzx-tabs-bottom-bar-width: 16px;
  --xzx-tabs-bottom-bar-height: 3px;
  --xzx-tabs-bottom-bar-color: var(--xzx-color-primary);
  --xzx-tabs-content-padding: 12.5px 16px;
}

@include b(tabs) {
  position: relative;

  @include e(wrap) {
    overflow: hidden;

    @include m(page-top) {
      position: fixed;
    }

    @include m(content-bottom) {
      top: auto;
      bottom: 0;
    }
  }

  @include e(nav) {
    position: relative;
    display: flex;
    background: var(--xzx-tabs-nav-background);
    user-select: none;

    @include m(complete) {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    @include m(line) {
      box-sizing: content-box;
      height: 100%;
    }

    @include m(complete) {
      //padding-right: var(--xzx-padding-xs);
      //padding-left: var(--xzx-padding-xs);
    }
    @include m(shrink) {
      //padding-right: var(--xzx-padding-xs);
      //padding-left: var(--xzx-padding-xs);
    }

    @include m(card) {
      box-sizing: border-box;
      height: var(--xzx-tabs-card-height);
      margin: 0 var(--xzx-padding-md);
      border: var(--xzx-border-width) solid var(--xzx-tabs-default-color);
      border-radius: var(--xzx-radius-sm);
      @include m(shrink) {
        display: inline-flex;
      }
    }
  }

  @include e(line) {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: var(--xzx-tabs-bottom-bar-width);
    height: var(--xzx-tabs-bottom-bar-height);
    background: var(--xzx-tabs-bottom-bar-color);
    border-radius: var(--xzx-tabs-bottom-bar-height);
  }

  @include e(track) {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    will-change: left;
  }

  @include e(content) {
    padding: var(--xzx-tabs-content-padding);
    @include m(animated) {
      overflow: hidden;
    }
  }

  @include m(line) {
    .#{$namespace}-tabs__wrap {
      height: var(--xzx-tabs-line-height);
    }
  }

  @include m(card) {
    > .#{$namespace}-tabs__wrap {
      height: var(--xzx-tabs-card-height);
    }
  }
}