// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../../common/icons";
@import "../../common/variables";

/*
Breadcrumbs

Markup:
<ul class="pt-breadcrumbs">
  <li><a class="pt-breadcrumbs-collapsed" href="#"></a></li>
  <li><a class="pt-breadcrumb pt-disabled">Folder one</a></li>
  <li><a class="pt-breadcrumb" href="#">Folder two</a></li>
  <li><a class="pt-breadcrumb" href="#">Folder three</a></li>
  <li><span class="pt-breadcrumb pt-breadcrumb-current">File</span></li>
</ul>

Styleguide pt-breadcrumbs
*/

// shaving off 1px for perfect centering (... icon is 5px high)
$breadcrumb-line-height: $pt-icon-size-large - 1px !default;

.pt-breadcrumbs {
  // ensure that the childrens' floats do not leak outside
  display: inline-block;
  // unstyled inline list reset
  margin: 0;
  cursor: default;
  padding: 0;
  list-style: none;
  vertical-align: top;
  line-height: $pt-input-height;

  // descendant selector because nothig should come between ul and li
  > li {
    // hide whitespace between items from HTML
    float: left;

    &::after {
      @include pt-icon();
      padding: 0 ($pt-grid-size / 2);
      color: $pt-icon-color;
      content: $pt-icon-chevron-right;
    }

    &:last-child::after {
      display: none;
    }
  }
}

.pt-breadcrumb,
.pt-breadcrumb-current,
.pt-breadcrumbs-collapsed {
  display: inline-block;
  line-height: $breadcrumb-line-height;
  font-size: $pt-font-size-large;
}

.pt-breadcrumb,
.pt-breadcrumbs-collapsed {
  color: $pt-text-color-muted;
}

.pt-breadcrumb {
  &:hover {
    text-decoration: none;
  }

  &.pt-disabled {
    cursor: not-allowed;
    color: $pt-text-color-disabled;
  }
}

.pt-breadcrumb-current {
  color: inherit;
  font-weight: 600;

  .pt-input {
    vertical-align: baseline;
    font-size: inherit;
    font-weight: inherit;
  }
}

.pt-breadcrumbs-collapsed {
  margin-right: 2px;
  border: none;
  border-radius: $pt-border-radius;
  background: $light-gray1;
  cursor: pointer;
  padding: 0 ($pt-grid-size / 2);

  &::before {
    @include pt-icon($pt-icon-size-large);
    line-height: $breadcrumb-line-height;
    content: $pt-icon-more;
  }

  &:hover {
    background: $gray5;
    text-decoration: none;
    color: $pt-text-color;
  }
}

.pt-dark {
  .pt-breadcrumb,
  .pt-breadcrumbs-collapsed {
    color: $pt-dark-text-color-muted;
  }

  .pt-breadcrumbs > li::after {
    color: $pt-dark-icon-color;
  }

  .pt-breadcrumb.pt-disabled {
    color: $pt-dark-text-color-disabled;
  }

  .pt-breadcrumb-current {
    color: $pt-dark-text-color;
  }

  .pt-breadcrumbs-collapsed {
    background: rgba($black, 0.4);

    &:hover {
      background: rgba($black, 0.6);
      color: $pt-dark-text-color;
    }
  }
}