//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

.ui-chip {
  margin       : 0.2em 0.25em;
  border-radius: 1em;
  font-size    : 0.9rem;
  overflow     : hidden;
  @include flex-row($display:inline-flex, $align:center, $wrap:false);
  @include box-shadow(0 0 0 1px rgba($base-border-color, .5));

  &.big {
    font-size: 1.2rem;
  }

  &.small {
    font-size: 0.6rem;
  }

  .ui-chip-label {
    background : $light;
    padding    : 0.1em 0.5em;
    font-weight: $font-weight-strong;
  }

  .ui-chip-value {
    padding: 0.1em 0.5em;
  }

  .ui-chip-close {
    color      : $primary;
    opacity    : 0.6;
    line-height: 1;
    margin     : 0 0.3em;

    &:hover {
      opacity: 0.9;
    }
  }
}
@include chip-theme(primary, $primary, $button-primary-text);
@include chip-theme(secondary, $secondary, $button-secondary-text);
@include chip-theme(dark, $dark, $button-dark-text);
@include chip-theme(light, $light, $button-light-text);
@include chip-theme(info, $info, $button-info-text);
@include chip-theme(danger, $danger, $button-danger-text);
@include chip-theme(success, $success, $button-success-text);
@include chip-theme(warning, $warning, $button-warning-text);

.ui-breadcrumb {
  display      : flex;
  flex-flow    : row wrap;
  list-style   : none;
  overflow     : hidden;
  line-height  : 1.5;
  // margin       : 0 .5em;
  border-radius: $base-border-radius;
  @include flex-auto();

  .ui-crumb {
    margin       : 0.25em 0;
    overflow     : hidden;
    padding-right: 0.75em;

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

    a {
      text-decoration: none;
      color          : $link-text;
      background     : $base-bg;
      position       : relative;
      padding        : 0.25em 0.25em 0.25em 1em;
    }

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

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

    &:first-child a {
      padding: 0.25em 0.25em 0.25em 0.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   : 0.5em solid transparent;
      /* Go big on the size, and let overflow hide */
      border-bottom: 0.5em solid transparent;
      border-left  : 0.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   : 0.5em solid transparent;
      border-bottom: 0.5em solid transparent;
      border-left  : 0.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     : contrast-color($primary, $black, $white);
        padding   : 0.25em 2px 0.25em 2em;
      }

      &:first-child a {
        padding      : 0.25em 2px 0.25em 1em;
        border-radius: 0.25em 0 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 : 0.75em;

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

      a {
        padding: 0.25em 1em 0.25em 0.25em;
      }

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

      &:first-child a {
        padding: 0.25em 0.75em 0.25em 0.25em;
      }

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

      a:before {
        border-left : none;
        border-right: 0.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: 0.25em 2em 0.25em 0;
        }

        &:first-child a {
          padding      : 0.25em 1em 0.25em 0;
          border-radius: 0 0.25em 0.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);