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

:root,
:host {
  --xzx-tab-text-color: var(--xzx-text-gray-1);
  --xzx-tab-active-text-color: var(--xzx-color-primary);
  --xzx-tab-disabled-text-color: var(--xzx-text-gray-3);
  --xzx-tab-font-size: var(--xzx-text-sm);
  --xzx-tab-line-height: 22px;
  --xzx-tabs-padding: 13px 16px;
}

@include b(tab) {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--xzx-tabs-padding);
  color: var(--xzx-tab-text-color);
  font-size: var(--xzx-tab-font-size);
  line-height: var(--xzx-tab-line-height);
  cursor: pointer;

  @include m(active) {
    color: var(--xzx-tab-active-text-color);
    font-weight: var(--xzx-text-w-sb);
  }

  @include m(disabled) {
    color: var(--xzx-tab-disabled-text-color);
    cursor: not-allowed;
  }

  @include m(grow) {
    flex: 1 0 auto;
  }

  @include m(shrink) {
    flex: none;
  }

  @include m(card) {
    color: var(--xzx-tabs-default-color);
    border-right: var(--xzx-border-width) solid var(--xzx-tabs-default-color);

    &:last-child {
      border-right: none;
    }

    &.#{$namespace}-tab--active {
      color: var(--xzx-white);
      background-color: var(--xzx-tabs-default-color);
    }

    &.#{$namespace}-tab--disabled {
      color: var(--xzx-tab-disabled-text-color);
    }
  }

  @include e(text) {

    @include m(ellipsis) {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}