$uiCommonCompTabsColor: #4f69ff;
$uiCommonCompTabsFont: 'serif';

@if variable-exists(color-primary){
  $uiCommonCompTabsColor:$color-primary;
} @else if variable-exists(color-secondary) {
  $uiCommonCompTabsColor:$color-secondary;
} @else if variable-exists(color-button){
  $uiCommonCompTabsColor:$color-button;
}

@if variable-exists(font-button){
  $uiCommonCompTabsFont:$font-button;
} @else if variable-exists(font-text) {
  $uiCommonCompTabsFont:$font-text;
}

.ui-common-comp-tabs-navigator{
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  overflow-x: auto;
  border-bottom: 1px solid #e8e8e8;
}

  .ui-common-comp-tabs-navigator-button{
    height: 100%;
    border-bottom: 5px solid white;
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
    white-space: normal;
    text-align: center;
    vertical-align: middle;
    border-bottom: 5px solid white;
    cursor: pointer;
    user-select: none;
    // border-bottom: 5px solid red;
  }

  .ui-common-comp-tabs-navigator-button:hover{
    border-bottom: 5px solid $uiCommonCompTabsColor !important;
  }

  .ui-common-comp-tabs-navigator-button-active{
    border-bottom: 5px solid $uiCommonCompTabsColor !important;
  }

  .ui-common-comp-tabs-navigator-button-active:hover{
    border-bottom: 5px solid #7dffa0 !important;
  }

  .ui-common-comp-tabs-navigator-button_one{
    min-width: 100% !important;
  }

  .ui-common-comp-tabs-navigator-button_two{
    min-width: 50% !important;
  }

  .ui-common-comp-tabs-navigator-button_three{
    min-width: 33.33% !important;
  }

  .ui-common-comp-tabs-navigator-button_four{
    min-width: 25% !important;
  }

  .ui-common-comp-tabs-navigator-button_more{
    min-width: 22%;
  }

    .ui-common-comp-tabs-navigator-button-icon{
      vertical-align: middle;
    }

    .ui-common-comp-tabs-navigator-button-icon_only{
      padding-top: 15px;
    }

    .ui-common-comp-tabs-navigator-button-icon_with_tag{
      padding-top: 5px;
    }

      .ui-common-comp-tabs-navigator-button-icon-img{
        height: 20px;
        width: auto;
      }

    .ui-common-comp-tabs-navigator-button-tag{
      vertical-align: middle;
      font-family: $uiCommonCompTabsFont;
    }

    .ui-common-comp-tabs-navigator-button-tag_only{
      padding-top: 15px;
      // border: 5px solid red;
    }

//------------------------------------------
//router

.ui-common-comp-tabs-router{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  // border: 5px solid green;
}

  .ui-common-comp-tabs-router-tab{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    // border: 5px solid red;
    // height: 100%;
    // overflow: auto;
    // transition: 5s !important;
    // transition: 1s;
    // transition: transform 330ms linear;
    // border: 5px solid red;
  }

    .ui-common-comp-tabs-router-tab-hidden{
      transform: translateX(-100vw);
    }