// Breadcrumbs
//================================================== //

.breadcrumb {
  &.hitbox {
    ol.breadcrumb-list li {
      &::after {
        padding-left: 0;
        padding-right: 0;
        position: relative;
      }

      .breadcrumb-text-truncated {
        &.hyperlink,
        &.breadcrumb-text {
          overflow: hidden;
          text-overflow: ellipsis;
          top: 6px;
          white-space: nowrap;
          width: 70px;
        }

        &.breadcrumb-text {
          position: relative;
        }
      }

      a.hyperlink,
      span.breadcrumb-text {
        font-size: 16px;
        line-height: 1.5em;
        margin: 0 8px;
        padding: 0;
        width: fit-content;

        &::after {
          content: '';
          display: block;
          height: 44px;
          left: 0;
          margin: 2px -8px 0;
          padding: 0 8px;
          position: relative;
          top: -14px;
          transform: translateY(-50%);
          width: 100%;
        }
      }
    }
  }

  .hyperlink,
  .breadcrumb-text,
  li > span {
    display: inline-block;
    height: 24px;
    padding: 0 3px;
  }

  // Hyperlinks already have this by default
  .breadcrumb-text {
    margin-left: -4px;
  }

  .btn-actions {
    @include antialiased();

    color: $breadcrumb-color;
    font-size: $ids-size-font-sm;
    height: 28px;
    line-height: 1.8em;
    margin-right: 0;
    min-height: 28px;
    min-width: 28px;
    width: 28px;
  }

  .breadcrumb-overflow-container {
    display: none;
    white-space: nowrap;
  }

  .breadcrumb-list,
  ol {
    min-height: $breadcrumb-container-height;
    position: relative;
    vertical-align: middle;

    // Defines the faded edge of the `.breadcrumb-list`
    &::before {
      @include transition(width 200ms $cubic-ease);

      background-color: transparent;
      content: '';
      display: inline-block;
      height: 100%;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 0;
      z-index: 20;
    }

    // Wraps each hyperlink
    li {
      @include antialiased();

      color: $breadcrumb-color;
      display: inline-block;
      list-style: none;

      span {
        color: $breadcrumb-color;
      }

      &.is-disabled {
        span {
          color: $breadcrumb-disabled-color;
        }

        .hyperlink {
          color: $breadcrumb-disabled-color;
        }
      }

      .current,
      &.current {
        font-size: $ids-size-font-sm;
        font-weight: $ids-number-font-weight-bold;

        .hyperlink,
        .breadcrumb-text {
          &:hover {
            color: $breadcrumb-color;
          }
        }

        span {
          font-weight: inherit;
        }

        &.is-disabled {
          span {
            color: $breadcrumb-disabled-color;
          }
        }

        .hyperlink {
          &[disabled] {
            color: $breadcrumb-disabled-color;
          }
        }
      }

      &:first-child {
        .hyperlink,
        .breadcrumb-text {
          margin-left: 0;
        }
      }
    }
  }

  // Added to the JS Component automatically when `truncate: false` is set.
  &.no-truncate {
    .breadcrumb-list li:first-child,
    ol li:first-child {
      .hyperlink,
      .breadcrumb-text {
        margin-left: -4px;
      }
    }
  }

  // Creates the "/" separator
  .breadcrumb-list li,
  ol li,
  .breadcrumb-overflow-container {
    &::after {
      @include antialiased();

      color: $breadcrumb-color;
      content: '\002F';
      font-size: $ids-size-font-sm;
      padding-left: 4px;
      padding-right: 8px;
    }

    &:last-child::after {
      content: none;
      padding: 0;
    }
  }

  // Truncated behavior forces all breadcrumbs onto one line and some to become collapsible.
  // Currently not fully implemented -- see infor-design/enterprise#4091
  &.truncated {
    align-items: center;
    display: flex;
    font-size: 0;
    position: relative;

    .breadcrumb-list li,
    ol li,
    .breadcrumb-overflow-container {
      display: inline-block;

      &::after {
        display: inline-block;
        margin-top: $breadcrumb-separator-margin-top;
        padding-right: 4px;
        vertical-align: top;
      }
    }

    .breadcrumb-overflow-container {
      > .btn-actions {
        flex-shrink: 0;
        height: auto;
        vertical-align: middle;
      }
    }

    .breadcrumb-list,
    ol {
      display: flex;
      justify-content: flex-end;
      overflow: hidden;

      // Enlarges the faded edge of the `.breadcrumb-list`
      &::before {
        background-image:
          linear-gradient(
            to right,
            rgba($body-color-primary-background, 1),
            rgba($body-color-primary-background, 0)
          );
        width: 32px;
      }

      li {
        font-size: 0;
        padding-left: 6px;
        white-space: nowrap;

        a,
        .breadcrumb-text {
          overflow: hidden;
          text-overflow: ellipsis;
          width: calc(100% - 7px); // accounts for the pseudo-element "/" delimeter + padding
        }

        &:first-child,
        &.current,
        &:last-child {
          flex-shrink: 0;

          a,
          .breadcrumb-text {
            text-overflow: clip;
            width: auto;
          }
        }

        &:last-child {
          a,
          .breadcrumb-text {
            margin-right: 4px;
            overflow: hidden;
          }
        }
      }
    }
  }

  span,
  .hyperlink,
  .breadcrumb-text {
    @include antialiased();

    color: $breadcrumb-color;
    font-size: $ids-size-font-sm;
    line-height: 2em;
    padding-top: 1px;
    text-decoration: none;
  }

  .hyperlink,
  .breadcrumb-text {
    &:visited {
      color: $breadcrumb-color;
    }

    &:hover {
      color: $breadcrumb-hover-color;
      text-decoration: underline;
    }

    &:focus {
      border-radius: 2px;
      color: $breadcrumb-focus-color;
      font-weight: $ids-number-font-weight-bold;
      border-bottom: none;
    }

    &:focus:hover {
      text-decoration: none !important;
      border-bottom: none !important;
    }

    &:active {
      color: $breadcrumb-hover-color;
    }

    &.current {
      font-weight: $ids-number-font-weight-bold;
    }

    &[disabled] {
      color: $breadcrumb-disabled-color;
    }
  }

  // Only hyperlinks (and not text blocks) get underline state
  .hyperlink {
    &:focus {
      &:hover {
        border-bottom: 1px solid $breadcrumb-hover-color;
      }
    }

    &:active {
      border-bottom: 1px solid $breadcrumb-hover-color;
    }
  }

  .is-disabled {
    span,
    .hyperlink,
    .breadcrumb-text {
      color: $breadcrumb-disabled-color;

      &:hover {
        color: $breadcrumb-disabled-color;
      }
    }

    .hyperlink {
      &:hover {
        border-bottom: 0;
      }

      &:focus:hover {
        border-bottom: 0;
        color: $breadcrumb-disabled-color;
      }

      &.active {
        border-bottom: 0;
      }
    }
  }
}

// Breadcrumb on a toolbar (see grid example)
.toolbar {
  .breadcrumb-list,
  ol {
    min-height: 0;
  }
}

.toolbar {
  .breadcrumb {
    display: inline-block;
    padding-top: 8px;
    vertical-align: top;

    a,
    span {
      font-size: $ids-size-font-base;
    }
  }
}

.breadcrumb.hitbox.truncated {
  .breadcrumb-list li {
    a.breadcrumb-text-truncated {
      top: 0;
    }
  }
}

// Scrollable-Flex Headers can change background color of the breadcrumb list
.scrollable-flex-header {
  .breadcrumb {
    background-color: $header-bg-color;
    display: block;
    padding: 1px 10px 0;

    &.truncated.hitbox {
      ol.breadcrumb-list li.breadcrumb-item {
        padding-left: 0;

        &::after {
          margin-top: 5px;
        }

        .hyperlink,
        .breadcrumb-text {
          overflow: initial;
          text-align: center;
        }
      }

      .breadcrumb-overflow-container {
        &::after {
          margin-top: 7px;
        }
      }
    }

    .hyperlink,
    .breadcrumb-text {
      border: 1px solid transparent;
      color: $header-breadcrumb-color;

      &:active:not([disabled]),
      &:hover:not([disabled]),
      &:focus:not([disabled]) {
        color: $header-breadcrumb-color;
      }

      &:hover:not([disabled]) {
        border-bottom: 1px solid $header-breadcrumb-color;
        color: $header-breadcrumb-color;
      }

      &:focus:not([disabled]) {
        border-radius: 8px;
        border: 1px solid $header-breadcrumb-color;
      }

      &:focus:not([disabled]):not(.hide-focus) {
        border-color: transparent;
        box-shadow: none;
        outline: 1px solid $header-breadcrumb-color;
      }
    }

    .btn-actions {
      .icon {
        color: $header-breadcrumb-color;
      }

      &:focus:not(.hide-focus) {
        box-shadow:
          0 0 0 2px transparent,
          0 0 0 1px $header-breadcrumb-color,
          0 0 1px 2px rgba($header-breadcrumb-color, 0.3);
      }
    }

    .breadcrumb-list,
    ol {
      padding-bottom: 15px;
      padding-top: 15px;

      li {
        color: $header-breadcrumb-color;

        &::after {
          color: $header-breadcrumb-color;
        }
      }
    }

    .breadcrumb-overflow-container::after {
      color: $header-breadcrumb-color;
      margin-top: 9px;
    }

    &.alternate {
      background-color: $header-breadcrumb-alt-bg-color;
      border-bottom: 1px solid $header-breadcrumb-border-color;

      .hyperlink,
      .breadcrumb-text {
        color: $header-breadcrumb-alt-color;

        &:active:not([disabled]),
        &:hover:not([disabled]),
        &:focus:not([disabled]) {
          color: $header-breadcrumb-alt-color;
        }

        &:focus:not([disabled]):not(.hide-focus) {
          outline: 1px solid $header-breadcrumb-alt-color;
        }

        &:focus:not([disabled]) {
          border: 1px solid $header-breadcrumb-alt-color;
        }

        &:hover:not([disabled]) {
          border-bottom: 1px solid $header-breadcrumb-alt-color;
        }
      }

      .btn-actions {
        .icon {
          color: $header-breadcrumb-alt-color;
        }

        &:focus:not(.hide-focus) {
          box-shadow:
            0 0 0 2px transparent,
            0 0 0 1px $header-breadcrumb-alt-color,
            0 0 1px 2px rgba($header-breadcrumb-alt-color, 0.3);
        }
      }

      .breadcrumb-list,
      ol {
        padding: 15px 0;

        // Change the faded edge to match the header background color
        &::before {
          background-image:
            linear-gradient(
              to right,
              rgba($header-breadcrumb-alt-bg-color, 1),
              rgba($header-breadcrumb-alt-bg-color, 0)
            );
        }

        li {
          color: $header-breadcrumb-alt-color;

          &::after {
            color: $header-breadcrumb-alt-color;
          }
        }
      }

      .breadcrumb-overflow-container::after {
        color: $header-breadcrumb-alt-color;
      }
    }

    &.truncated {
      display: flex;

      // Change the faded edge to match the header background color
      .breadcrumb-list,
      ol {
        &::before {
          background-image:
            linear-gradient(
              to right,
              rgba($header-bg-color, 1),
              rgba($header-bg-color, 0)
            );
        }
      }

      // Change the faded edge to match the alternate header background color
      &.alternate {
        .breadcrumb-list,
        ol {
          &::before {
            background-image:
              linear-gradient(
                to right,
                rgba($header-breadcrumb-alt-bg-color, 1),
                rgba($header-breadcrumb-alt-bg-color, 0)
              );
          }
        }
      }
    }
  }
}

.header + .page-container .scrollable-flex-header .breadcrumb:not(.alternate) {
  background-color: $subhead-bg-color;

  &.truncated {
    .breadcrumb-list,
    ol {
      &::before {
        background-image:
          linear-gradient(
            to right,
            rgba($subhead-bg-color, 1),
            rgba($subhead-bg-color, 0)
          );
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .header + .page-container .scrollable-flex-header .breadcrumb:not(.alternate) {
    &.truncated {
      .breadcrumb-list,
      ol {
        &::before {
          background-image:
            linear-gradient(
              to left,
              rgba($subhead-bg-color, 1),
              rgba($subhead-bg-color, 0)
            );
        }
      }
    }
  }

  .breadcrumb {
    // Hyperlinks already have this by default
    .breadcrumb-text {
      margin-left: 0;
      margin-right: -4px;
    }
  }

  .breadcrumb li,
  .breadcrumb-overflow-container {
    &::after {
      content: '\005C';
      padding-left: 8px;
      padding-right: 4px;
    }

    &:last-child::after {
      content: '';
      display: inline-block;
    }

    &:first-child {
      .hyperlink,
      .breadrcrumb-text {
        margin-right: 0;
      }
    }
  }

  .breadcrumb-list,
  ol {
    &::before {
      left: auto;
      right: 0;
    }
  }

  .breadcrumb {
    // Added to the JS Component automatically when `truncate: false` is set.
    &.no-truncate {
      .breadcrumb-list li:first-child,
      ol li:first-child {
        .hyperlink,
        .breadcrumb-text {
          margin-right: -4px;
        }
      }
    }

    &.truncated {
      .breadcrumb-list,
      ol {
        &::before {
          background-image:
            linear-gradient(
              to right,
              rgba($body-color-primary-background, 0),
              rgba($body-color-primary-background, 1)
            );
        }

        li {
          padding-left: 0;
          padding-right: 4px;

          &::after {
            content: '\005C';
            padding-left: 4px;
          }

          a,
          .breadcrumb-text {
            margin-right: 0;
          }

          &:last-child::after {
            content: '';
          }
        }
      }
    }
  }

  .scrollable-flex-header {
    .breadcrumb.truncated {
      .breadcrumb-list li,
      ol li {
        &::after {
          margin-top: 5px;
        }
      }

      .breadcrumb-overflow-container {
        &::after {
          margin-top: 7px;
        }
      }

      .breadcrumb-list,
      ol {
        &::before {
          background-image:
            linear-gradient(
              to right,
              rgba($header-bg-color, 0),
              rgba($header-bg-color, 1)
            );
        }
      }

      &.alternate {
        .breadcrumb-list,
        ol {
          &::before {
            background-image:
              linear-gradient(
                to right,
                rgba($header-breadcrumb-alt-bg-color, 0),
                rgba($header-breadcrumb-alt-bg-color, 1)
              );
          }
        }
      }
    }
  }
}