// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Pivot and tab styles


.ms-Pivot {
  @include ms-font-m;
  @include ms-u-normalize;
  height: 40px;
  list-style-type: none;
  overflow-x: hidden;
  white-space: nowrap;
}

.ms-Pivot-link {
  color: $ms-color-neutralPrimary;
  display: inline-block;
  position: relative;
  font-family: $ms-font-family-regular;
  font-size: $ms-font-size-m-plus;
  line-height: 40px;
  margin-right: 8px;

  &:after {
    content: '';
    width: 100%;
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: $ms-color-themePrimary;

    @media screen and (-ms-high-contrast: active) {
      background-color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      background-color: $ms-color-contrastWhiteSelected;
    }
  }

  &:hover, 
  &:focus,
  &:active {
    color: $ms-color-black;
    cursor: pointer;

    + .ms-Pivot-dropdownIcon {
      color: $ms-color-neutralDark;
    }
  }

  &:active {
    font-family: $ms-font-family-semibold;

    @media screen and (-ms-high-contrast: active) {
      color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      color: $ms-color-contrastWhiteSelected;
    }

    &:after {
      display: block;
    }
  }

  //== State: Selected
  &.is-selected {
    color: $ms-color-black;
    font-family: $ms-font-family-semibold;

    @media screen and (-ms-high-contrast: active) {
      color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      color: $ms-color-contrastWhiteSelected;
    }

    &:after {
      display: block;
    }

    + .ms-Pivot-dropdownIcon {
      color: $ms-color-neutralDark;
    }
  }
}

.ms-Pivot-dropdownIcon {
  font-size: $ms-font-size-m-plus + 1;
  position: relative;
  top: 2px;
}

// Overflow (ellipsis)
.ms-Pivot-link.ms-Pivot-link--overflow {
  color: $ms-color-neutralSecondary;

  &.is-selected {
    color: $ms-color-themePrimary;
  }

  &:hover:not(.is-selected), 
  &:focus:not(.is-selected) { 
    color: $ms-color-neutralDark; 
  }

  &:active {
    &:after {
      display: none;
    }
  }
}

// Ellipsis icon
.ms-Pivot-ellipsis {
  font-size: $ms-font-size-m-plus;
  position: relative;
  top: 0;
}


//== Modifier: Large Pivots
//
.ms-Pivot.ms-Pivot--large {
  .ms-Pivot-link {
    font-size: $ms-font-size-l;

    &:active {
      font-family: $ms-font-family-regular;
    }

    &.is-selected {
      font-family: $ms-font-family-regular;
    }
  }

  .ms-Pivot-link.ms-Pivot-link--overflow {
    &:after {
      font-size: $ms-font-size-l;
    }
  }
}


//== Modifier: Tabs
//
.ms-Pivot.ms-Pivot--tabs {
  height: 40px;

  .ms-Pivot-link {
    height: 40px;
    background-color: $ms-color-neutralLighter;
    line-height: 40px;
    margin-right: -2px; // Remove space next to inline-block element
    padding: 0 10px;
    font-family: $ms-font-family-semilight !important;

    &:hover:not(.is-selected):not(.ms-Pivot-link--overflow),
    &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { 
      color: $ms-color-black; 
    }

    &:active {
      color: $ms-color-white !important;
      background-color: $ms-color-themePrimary;
      font-family: $ms-font-family-semilight;

      @media screen and (-ms-high-contrast: active) {
        background-color: $ms-color-contrastBlackSelected;
        color: $ms-color-black;
      }

      @media screen and (-ms-high-contrast: black-on-white) {
        background-color: $ms-color-contrastWhiteSelected;
        color: $ms-color-white;
      }
    }

    //== State: Selected
    &.is-selected {
      background-color: $ms-color-themePrimary;
      color: $ms-color-white;
      font-family: $ms-font-family-semilight;

      @media screen and (-ms-high-contrast: active) {
        background-color: $ms-color-contrastBlackSelected;
        color: $ms-color-black;
      }

      @media screen and (-ms-high-contrast: black-on-white) {
        background-color: $ms-color-contrastWhiteSelected;
        color: $ms-color-white;
      }
    }
  }

  .ms-Pivot-link.ms-Pivot-link--overflow {
    &:hover:not(.is-selected), 
    &:focus:not(.is-selected) {
      background-color: $ms-color-white;
    }

    &:active {
      background-color: $ms-color-themePrimary !important;
    }
  }
}



@media (min-width: $ms-screen-lg-min) {
  .ms-Pivot-link {
    font-size: $ms-font-size-m;
  }

  .ms-Pivot-link.ms-Pivot-link--overflow {
    &:after {
      font-size: $ms-font-size-m;
    }
  }
}



// All high contrast styling rules
@media screen and (-ms-high-contrast: active) {
  .ms-Pivot.ms-Pivot--tabs {
    .ms-Pivot-link {
      &.is-selected {
        font-family: $ms-font-family-semibold;
      }
    }
  }
}