// 
// @description : 
// @author      : Adarsh Pastakia
// @copyright   : 2016
// @license     : MIT
@mixin breadcrumb-theme($theme, $themecolor) {
  .ui-breadcrumb.#{$theme} .ui-crumb {
    @for $i from 0 through 9 {
      $color: lighten($themecolor, $i * 3%);
      $hover: darken($color, 5%);

      &:nth-child(#{$i + 1}) a {
        background: $color;

        &:after {
          border-left-color: $color;
        }

        &:hover {
          background: $hover;

          &:after {
            border-left-color: $hover;
          }
        }
      }
    }
  }

  .rtl,
  [dir="rtl"] {
    .ui-breadcrumb.#{$theme} .ui-crumb {
      @for $i from 0 through 9 {
        $color: lighten($themecolor, $i * 3%);
        $hover: darken($color, 5%);

        &:nth-child(#{$i + 1}) a {
          &:after {
            border-right-color: $color;
          }

          &:hover:after {
            border-right-color: $hover;
          }
        }
      }
    }
  }
}

.ui-breadcrumb {
  display      : flex;
  flex-flow    : row wrap;
  list-style   : none;
  overflow     : hidden;
  font-size    : .9em;
  margin       : 0 .5em;
  border-radius: $base-border-radius;

  .ui-crumb {
    margin       : .25em 0;
    overflow     : hidden;
    padding-right: .75em;

    &:not(:first-child) {
      margin-left: -.75em;
    }

    a {
      text-decoration: none;
      color          : $link-text;
      background     : $base-bg;
      position       : relative;
      line-height    : 1.5;
      padding        : .25em .25em .25em 1em;
    }

    a:hover {
      color: $link-hover-text;

      &:before {
        border-left-color: $link-hover-text;
      }
    }

    &:first-child a {
      padding: .25em .25em .25em .75em;
    }

    &:last-child {
      pointer-events: none !important;
      cursor        : default;

      a {
        color: $base-text;

        &:after,
        &:before {
          content: none;
        }
      }
    }

    a:after {
      content      : ' ';
      display      : block;
      width        : 0;
      height       : 0;
      border-top   : .5em solid transparent;
      /* Go big on the size, and let overflow hide */
      border-bottom: .5em solid transparent;
      border-left  : .5em solid $base-bg;
      position     : absolute;
      top          : 50%;
      transform    : translateY(-50%);
      left         : 100%;
      z-index      : 2;
    }

    a:before {
      content      : ' ';
      display      : block;
      width        : 0;
      height       : 0;
      border-top   : .5em solid transparent;
      border-bottom: .5em solid transparent;
      border-left  : .5em solid $link-text;
      position     : absolute;
      top          : 50%;
      margin-left  : 2px;
      left         : 100%;
      z-index      : 1;
      transform    : translateY(-50%);
    }
  }

  &.ui-theme {
    .ui-crumb {
      padding-right: 1.5em;

      &:not(:first-child) {
        margin-left: -1.5em;
      }

      a {
        background: $primary;
        color     : $primary-text;
        padding   : .25em 2px .25em 2em;
      }

      &:first-child a {
        padding      : .25em 2px .25em 1em;
        border-radius: .25em 0 0 .25em;
      }

      &:last-child a {
        &:after,
        &:before {
          content: ' ';
        }
      }

      a:after {
        margin-left  : -1px;
        border-top   : 1.5em solid transparent;
        /* Go big on the size, and let overflow hide */
        border-bottom: 1.5em solid transparent;
        border-left  : 1.25em solid $primary;
      }

      a:before {
        margin-left  : 1px;
        border-top   : 1.5em solid transparent;
        border-bottom: 1.5em solid transparent;
        border-left  : 1.25em solid $white;
      }
    }
  }
}

.rtl,
[dir="rtl"] {
  .ui-breadcrumb {
    .ui-crumb {
      padding-right: 0;
      padding-left : .75em;

      &:not(:first-child) {
        margin-left : 0;
        margin-right: -.75em;
      }

      a {
        padding: .25em 1em .25em .25em;
      }

      a:hover {
        &:before {
          border-right-color: $link-hover-text;
        }
      }

      &:first-child a {
        padding: .25em .75em .25em .25em;
      }

      a:after {
        border-left : none;
        border-right: .5em solid $base-bg;
        right       : 100%;
        left        : auto;
      }

      a:before {
        border-left : none;
        border-right: .5em solid $link-text;
        margin-right: 2px;
        right       : 100%;
        left        : auto;
      }
    }

    &.ui-theme {
      .ui-crumb {
        padding-right: 0;
        padding-left : 1.5em;

        &:not(:first-child) {
          margin-left : 0;
          margin-right: -1.5em;
        }

        a {
          padding: .25em 2em .25em 0;
        }

        &:first-child a {
          padding      : .25em 1em .25em 0;
          border-radius: 0 .25em .25em 0;
        }

        a:after {
          border-right: 1.25em solid $primary;
        }

        a:before {
          border-right: 1.25em solid $white;
        }
      }
    }
  }
}
@include breadcrumb-theme(primary, $primary);
@include breadcrumb-theme(secondary, $secondary);