// 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 {
  margin: 23px 0 1px 0;

  &.is-overflow {
    .ms-Breadcrumb-overflow {
      display: inline;
    }
  }
}

.ms-Breadcrumb-chevron {
  font-size: $ms-font-size-l;
  color: $ms-color-neutralSecondary;
  vertical-align: top;
  margin: 10px 0;
}

.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;
  margin-right: -4px;

  .ms-Breadcrumb-overflowButton {
    font-size: $ms-font-size-s;
    display: inline-block;
    color:$ms-color-themePrimary;
    margin-right: -4px;
    padding: 12px 8px 3px 8px;
    cursor: pointer;
  }
}

.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: white;
  }

  .ms-ContextualMenu {
    border: none;
    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 {
  @include ms-font-xl();
  display: inline-block;
  padding: 0 4px;
  max-width: 160px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


@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: $ms-font-size-m;
    margin-top: 7px;
  }

  .ms-Breadcrumb-overflow {
    .ms-Breadcrumb-overflowButton {
      padding-top: 8px;
      padding-bottom: 3px;
    }
  }
}

@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-top: 4px;
  }

  .ms-Breadcrumb-overflow {
    .ms-Breadcrumb-overflowButton {
      padding-top: 5px;
      padding-bottom: 3px;
    }
  }
}