@import "../../../variables";

$tab-height: 36px;

$tab-active-title-maxWidth: 25rem;
$tab-title-maxWidth: 5rem;

.cxb-urlTabs{
  overflow: hidden;
  margin-left: $layout-nav-width;
  height: $tab-height;
  margin-bottom: -1px;
}

.cse-tabTitle{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  //max-width: 160px;
  max-width: $tab-title-maxWidth;
  &.cxs-active{
    max-width: $tab-active-title-maxWidth;
  }
}

.cxb-navtab-tooltip{
  padding: .2rem;
  background-color: $nav-background-color;
}

.cse-navtab-tooltip-body{
  background-color: white;
  padding: .2rem .5rem;
  max-width: 20rem;
}

.cxb-scroller.cxm-navTabs {
  & > .cxe-scroller-left-arrow,
  & > .cxe-scroller-right-arrow{
    &:hover{
      svg{
        left: 40%;
        top: 40%;

        height: 20px;
        width: 20px;
      }
      background-color: $nav-background-color;
    }

  }
}

.cxb-dragsource.cxm-navTab{
  display: inline-block;
  padding: 0 .05rem;
}

.cxb-button.cxm-tabRemoveButton{
  padding: 2px;
  height: auto;
  opacity: .8;
  i{
    //font-size: 90%;
    display: block;
    color: $base-font-color-light;
  }

  &:hover{
    opacity: 1;
  }
}

.cse-tabPin{
  font-size: 85%;
  color: lighten($base-font-color, 20);

  &:hover{
    color: $base-font-color;
  }
}

.cxb-tab.cxm-urlTab{
  display: inline-block;
  height: $tab-height;
  border-radius: 5px 5px 0 0px;
  overflow: hidden;
  padding: 0;
  border: 0;
  transition: background-color .3s linear;

  &.cxs-collapsed{
    min-height: 0;
    max-height: 0;
  }

  .cxe-tab-header{
    transition-property: background-position;
    transition-duration: .4s;
    transition-timing-function: ease;
    width: 100%;
    height: 3px;
    border: 0;
    border-radius: 5px 5px 0 0px;

    background: linear-gradient(to right, $nav-selected-color 50%, $nav-background-color 50%);
    background-size: 200% 100%;
    background-position: right bottom;

    &:not(.cxs-active){

      background-color: $nav-background-color;
      //width: 100%;
    }
    &.cxs-active{
      background-position: left bottom;
      background-color: $nav-selected-color;
    }
  }

  .cxb-moduleGlyph{
    .fa{
      &:hover{
        opacity: .9;
      }
    }
  }

  &:not(.cxs-active){
    opacity: .9;

    .cxb-button{
      opacity: .8;
    }
  }

  &.cxs-active{
    font-weight: bold;
    background-color: $nav-background-color !important;
  }

  &:hover{
    background-color: lighten($nav-background-color, 7);

    &:not(.cxs-active){
      opacity: 1;

      .cxb-button{
        opacity: .9;
      }

      .cxe-tab-header{
        background-color: darken($nav-background-color, 10);
      }
    }
  }
}

.cxe-tabMenu{
  font-size: 12px;

  .cxs-disabled{
    color: lightgray;
  }

  .cxb-menuitem.cxs-medium-padding > a, .cxb-menuitem.cxs-medium-padding > span {
    padding: 5px 10px;
  }

  .cxe-menu-item > hr{
    margin: 0.1rem .2rem !important;
  }
}