// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group breadcrumbs
////

/// Margin around a breadcrumbs container.
/// @type Number
$breadcrumbs-margin: 0 0 $global-margin 0 !default;

/// Font size of breadcrumb links.
/// @type Number
$breadcrumbs-item-font-size: rem-calc(11) !default;

/// Color of breadcrumb links.
/// @type Color
$breadcrumbs-item-color: $primary-color !default;

/// Color of the active breadcrumb link.
/// @type Color
$breadcrumbs-item-color-current: $black !default;

/// Opacity of disabled breadcrumb links.
/// @type Number
$breadcrumbs-item-color-disabled: $medium-gray !default;

/// Margin between breadcrumb items.
/// @type Number
$breadcrumbs-item-margin: 0.75rem !default;

/// If `true`, makes breadcrumb links uppercase.
/// @type Boolean
$breadcrumbs-item-uppercase: true !default;

/// If `true`, adds a slash between breadcrumb links.
/// @type Boolean
$breadcrumbs-item-slash: true !default;

/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
@mixin breadcrumbs-container {
  @include clearfix;
  list-style: none;
  margin: $breadcrumbs-margin;

  // Item wrapper
  li {
    float: #{$global-left};
    color: $breadcrumbs-item-color-current;
    font-size: $breadcrumbs-item-font-size;
    cursor: default;

    @if $breadcrumbs-item-uppercase {
      text-transform: uppercase;
    }

    @if $breadcrumbs-item-slash {
      // Need to escape the backslash
      $slash: if($global-text-direction == 'ltr', '/', '\\');

      &:not(:last-child)::after {
        color: $medium-gray;
        content: $slash;
        margin: 0 $breadcrumbs-item-margin;
        position: relative;
        top: 1px;
        opacity: 1;
      }
    }
    @else {
      margin-#{$global-right}: $breadcrumbs-item-margin;
    }
  }

  // Page links
  a {
    color: $breadcrumbs-item-color;

    &:hover {
      text-decoration: underline;
    }
  }
}

@mixin foundation-breadcrumbs {
  .breadcrumbs {
    @include breadcrumbs-container;

    .disabled {
      color: $breadcrumbs-item-color-disabled;
      cursor: not-allowed;
    }
  }
}