//
// TABBAR
//
.tabBar {
  padding-top: $tabbar-button-distance;
  padding-left: $tabbar-button-distance;
  padding-right: $tabbar-button-distance;
  border-bottom: px-to-rem(3) solid $tabbar-divider-color;
  min-height: $tabbar-height;
}

.tabButton {
  @include background($tabbar-inactive-background);
  @include border-radius-top($tabbar-border-radius);
  @include background-clip(padding-box);
  @include box-sizing(border-box);

  color:  $tabbar-inactive-text-color;

  line-height:  $tabbar-height - $tabbar-button-distance;

  // This is for equal sizes od the buttons when added in a toolbar or
  // other container with flex :1
  width: 0;

  cursor:pointer;

  text-align: center;

  $tab-button-border: px-to-rem(1) solid $tabbar-inactive-border-color;
  border-top: $tab-button-border;
  border-left: $tab-button-border;
  border-right: $tab-button-border;
}

.tabButton + .tabButton {
  margin-left: $tabbar-button-distance;
}

.tabButton.active, .tabButton.selected {
  @include background($tabbar-active-background);
  border: px-to-rem(1) solid $tabbar-active-border-color;
  border-bottom: 0px solid transparent;
}