/**
 * Office UI Fabric JS 1.5.0
 * The JavaScript front-end framework for building experiences for Office 365.
 **/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Breadcrumb styles


.ms-Breadcrumb {
  @include ms-baseFont;
  margin: 23px 0 1px;

  &.is-overflow {
    .ms-Breadcrumb-overflow {
      display: inline-block;
      margin-right: -4px;
    }
  }
}

.ms-Breadcrumb-chevron {
  font-size: $ms-font-size-s;
  color: $ms-color-neutralSecondary;
  vertical-align: top;
  margin: 13px 4px;
  line-height: 1;
}

.ms-Breadcrumb-list {
  display: inline;
  white-space: nowrap;
  padding: 0;
  margin: 0;

  .ms-Breadcrumb-listItem {
    list-style-type: none;
    vertical-align: top;
    margin: 0;
    padding: 0;
    display: inline-block;

    &:last-of-type {
      .ms-Breadcrumb-chevron {
        display: none;
      }
    }
  }
}

.ms-Breadcrumb-overflow {
  display: none;
  position: relative;

  .ms-Breadcrumb-overflowButton {
    font-size: 16px;
    display: inline-block;
    color: $ms-color-themePrimary;
    padding: 8px;
    cursor: pointer;
    vertical-align: top;
  }
}

.ms-Breadcrumb-overflowMenu {
  display: none;
  position: absolute;

  &.is-open {
    display: block;
    top: 36px;
    left: 0;
    @include drop-shadow;
    background-color: $ms-color-white;
    border: 1px solid $ms-color-neutralTertiaryAlt;
    z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
  }

  &::before {
    position: absolute;
    @include drop-shadow;
    top: -6px;
    left: 6px;
    content: ' ';
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    background-color: $ms-color-white;
  }

  .ms-ContextualMenu {
    border: 0;
    box-shadow: none;
    position: relative;
    width: 190px;

    &.is-open {
      margin-bottom: 0;
    }
  }
}

.ms-Breadcrumb-itemLink,
.ms-Breadcrumb-overflowButton {
  text-decoration: none;
  outline: transparent;

  &:hover {
    background-color: $ms-color-neutralLighter;
    cursor: pointer;
  }

  &:focus {
    outline: $ms-color-neutralSecondaryAlt solid 1px;
    color: $ms-color-black;
  }

  &:active {
    outline: transparent;
    background-color: $ms-color-neutralTertiaryAlt;
  }
}

.ms-Breadcrumb-itemLink {
  font-weight: $ms-font-weight-light;
  font-size: $ms-font-size-xl;
  color: $ms-color-neutralPrimary;
  display: inline-block;
  padding: 0 4px;
  max-width: 160px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: top;
}


@media screen and (max-width: $ms-screen-md-max) {
  .ms-Breadcrumb {
    margin: 10px 0;
  }

  .ms-Breadcrumb-itemLink {
    font-size: $ms-font-size-l;
  }

  .ms-Breadcrumb-chevron {
    font-size: 10px;
    margin: 9px 3px;
  }

  .ms-Breadcrumb-overflow {
    .ms-Breadcrumb-overflowButton {
      font-size: 16px;
      padding: 2px 0;
    }
  }
}

@media screen and (max-width: $ms-screen-sm-max) {
  .ms-Breadcrumb-itemLink {
    font-size: $ms-font-size-m;
    max-width: 116px;
  }

  .ms-Breadcrumb-chevron {
    margin: 5px 4px;
  }

  .ms-Breadcrumb-overflow {
    .ms-Breadcrumb-overflowButton {
      padding: 2px 4px;
    }
  }
}