/* -----------------------------------------------------------------------------

   Component: Tabs

----------------------------------------------------------------------------- */

// Container

// -----------------------------------------------------------------------------

.tab-container {

  background-color: @tabbar-bg-color;

  qproperty-BottomAboveLineColor: @tabbar-bg-color;

  qproperty-BottomBelowLineColor: @accent;

}

// Flat Tabs

// -----------------------------------------------------------------------------

.tab-flat {

  background-color: @tab-bg-color;

  border-right: 1 solid @tab-border-color;

  border-bottom: 1 solid @accent;

  border-top: 0;

  border-left: 0;

  border-radius: 0;

  color: @tab-text-color;

  padding: 3 4 3 4;

  margin: 0;

  &:hover {

    background-color: @tab-bg-color-hover;

    color: @tab-text-color-hover;

  }

  &:selected {

    background-color: @tab-bg-color-selected;

    color: @tab-text-color-selected;

    border-bottom-color: @tab-bg-color-selected;

  }

  &:only-one {

    margin: 0;

  }

}

// Rounded Tabs

// -----------------------------------------------------------------------------

.tab-round {

  @horizontal-padding: 7;

  background-color: @tab-bg-color;

  border: 1 solid @accent;

  color: @tab-text-color;

  margin: 3 -1 0 0;

  padding: 2 @horizontal-padding 1 @horizontal-padding;

  &:hover {

    background-color: @tab-bg-color-hover;

    color: @tab-text-color-hover;

  }

  &:selected {

    background-color: @tab-bg-color-selected;

    border-top-right-radius: 2;

    border-top-left-radius: 2;

    border-bottom-color: @tab-bg-color-selected;

    color: @tab-text-color-selected;

    margin: 1 -1 -1 0;

    padding: 2 @horizontal-padding 2 @horizontal-padding;

  }

  &:only-one {

    margin: 1 0 0 0;

    padding: 3 @horizontal-padding 3 @horizontal-padding;

  }

  &:last {

    margin-right: 0;

    border-top-right-radius: 2;

  }

  &:first {

    border-top-left-radius: 2;

  }

}