hy-breadcrumbs.scss

:host {
  display: block;
}

// Default variant
.hy-breadcrumbs {
  display: inline-block;
  width: auto;

  &.is-condensed {
    width: 100%;
  }

  ol {
    margin: 0;
    padding: 0;
  }

  .breadcrumb-container {
    color: var(--grayscale-dark);
    display: flex;
    flex-wrap: nowrap;
    font-family: var(--main-font-family);
    list-style-type: none;
    margin: 0;
    min-height: 72px;
    overflow: hidden;
    padding: 0;

    @include breakpoint($narrow) {
      min-height: 76px;
    }
    @include breakpoint($wide) {
      min-height: 86px;
    }
    @include breakpoint($extrawide) {
      min-height: 94px;
    }
  }

  .breadcrumb-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;

    a {
      color: var(--brand-main-light);
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 20px;
      position: relative;
      text-decoration: none;

      @include breakpoint($narrow) {
        margin-right: 28px;
      }

      @include breakpoint($wide) {
        margin-right: 30px;
      }

      .breadcrumb-item-caret {
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);

        @include breakpoint($narrow) {
          right: -18px;
        }

        @include breakpoint($wide) {
          right: -19px;
        }

        &:hover {
          cursor: default;
        }
      }
    }

    a.default {
      @include font-size(14px, 20px);

      @include breakpoint($narrow) {
        @include font-size(16px, 24px);
      }
    }

    &:hover {
      a {
        color: var(--brand-main);
        text-decoration: underline;
      }
    }

    &:focus {
      outline: auto;
    }

    &.hidden {
      display: none;
    }
  }

  .breadcrumb-item.home {
    hy-icon.default {
      svg {
        fill: var(--brand-main-light);
        stroke: var(--brand-main-light);
      }
    }

    &:hover {
      svg {
        fill: var(--brand-main) !important;
        stroke: var(--brand-main) !important;
      }
    }
  }

  .breadcrumb-item.main {
    min-width: 0;
  }

  .breadcrumb-item__more {
    display: none;
    flex-direction: row;
    align-items: center;
    position: relative;
    margin-right: 20px;

    @include breakpoint($narrow) {
      margin-right: 25px;
    }

    @include breakpoint($wide) {
      margin-right: 30px;
    }

    &.visible {
      display: flex;
    }

    .breadcrumb-item-caret {
      position: absolute;
      right: -15px;
      top: 50%;
      transform: translateY(-50%);

      @include breakpoint($narrow) {
        right: -18px;
      }

      &:hover {
        cursor: default;
      }

      &__drop {
        position: absolute;
        right: 5.5px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .breadcrumb-item-caret {
    svg {
      fill: var(--grayscale-dark);
    }
  }

  .breadcrumb-item-dropdown-button {
    display: flex;
    flex-direction: row;
    color: var(--brand-main-light);
    cursor: pointer;
    border: 1.5px solid var(--brand-main-light);
    font-size: 1.5rem;
    line-height: 10px;
    border-radius: 3px;
    background-color: var(--grayscale-white);
    box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.3);
    padding: 0 25px 9px 10px;
    position: relative;

    hy-icon {
      svg {
        fill: var(--brand-main-light);
        margin: 0 0 -3px 10px;
        transform: rotate(90deg);
      }
    }
  }

  .breadcrumb-item-dropdown-button.is-open {
    background-color: var(--brand-main-light);
    color: var(--grayscale-white);

    svg {
      fill: var(--grayscale-white);
      margin: 0 0 -3px 10px;
      transform: rotate(270deg);
    }
  }

  .breadcrumb-hidden-items {
    display: none;
    visibility: hidden;

    &__is-open {
      background: var(--grayscale-white);
      box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.2);
      display: block;
      margin-top: -9px;
      padding: 32px 16px 6px 16px;
      position: absolute;
      visibility: visible;
      z-index: 5;

      @include breakpoint($narrow) {
        padding: 32px 64px 6px 32px;
      }

      a {
        margin: 0;
        padding-bottom: 26px;
      }
    }
  }

  .breadcrumb-item__current {
    flex: 0 2 auto;
    min-width: 0;

    &:hover {
      a {
        cursor: default;
        color: var(--grayscale-dark) !important;
        text-decoration: none !important;
      }
    }
  }

  .breadcrumb-item__current a {
    color: var(--grayscale-dark);
    font-family: var(--main-font-family);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: auto;
  }

  .intermediate {
    display: flex;
    text-overflow: initial;
  }

  .intermediate.hidden {
    display: none;
    visibility: hidden;
  }

  .breadcrumb-item.main,
  .breadcrumb-item.intermediate,
  .breadcrumb-item.home {
    a {
      min-height: 44px;
    }
  }
  .breadcrumb-item.breadcrumb-item__current {
    a {
      min-height: 0;
    }
  }

  #more,
  .more {
    display: none;
    visibility: hidden;
  }
  #more.visible,
  .more.visible {
    display: flex;
    visibility: visible;
  }
}

// Large variant. Do not show Breadcrumbs if there is a hero and a sidebar on Large/Medium screens
.hy-breadcrumbs.large.with-sidebar {
  display: block;
  visibility: visible;

  a.large {
    @include font-size(26px, 26px);
    color: var(--grayscale-black);
    font-weight: 700;
  }

  .breadcrumb-item-caret {
    svg {
      fill: var(--grayscale-black);
    }
  }

  .breadcrumb-container {
    color: var(--grayscale-black);
    display: flex;
    flex-wrap: nowrap;
    font-family: var(--main-font-family);
    list-style-type: none;
    margin: 0;
    min-height: 64px;
    overflow: hidden;
    padding: 0;

    @include breakpoint($narrow) {
      min-height: 84px;
    }

    .breadcrumb-item.home {
      svg {
        fill: var(--grayscale-black);
        stroke: var(--grayscale-black);
        stroke-width: 30;
      }
    }
  }

  @include breakpoint($extrawide) {
    display: none;
    visibility: hidden;
  }
}