@use "00-base/configure" as *;

$breadcrumbs-fade-width: 50px;
$breadcrumbs-scrollbar-height: 12px;

.ma__breadcrumbs {
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    width: $breadcrumbs-fade-width;
    height: calc(100% - #{$breadcrumbs-scrollbar-height});
    background: transparent;
    z-index: 1;
    will-change: opacity, z-index;
    transition: opacity .4s, z-index .4s;
    opacity: 0;
  }

  &:before {
    left: 0;
    background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
  }

  &:after {
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 80%);
  }

  &--fade-left {

    &:before {
      opacity: 1;
      z-index: 3;
    }
  }

  &--fade-right {

    &:after {
      opacity: 1;
      z-index: 3;
    }
  }

  &__container {

    @include ma-container;
    z-index: 2;
    position: relative;

    @media ($bp-large-max) {
      white-space: nowrap;
      overflow-x: scroll;
    }
  }

  &__label {
    display: inline-block;
    font-size: $fonts-smaller;
    letter-spacing: $letter-spacing-large;
    text-transform: uppercase;
  }

  &__items {

    @include ma-reset-list;
    padding: 10px 0;
    position: relative;

    @media ($bp-medium-min) {
      border-top: 1px solid;
    }
  }

  &__item {

    @include ma-chevron;
    display: inline-block;

    &:after {
      border-width: 2px;
      height: 7px;
      margin-left: 0;
      margin-right: 3px;
      width: 7px;
      border-color: var(--mf-c-gray-dark);
    }

    &:first-child {

      &:after {
        margin-left: -3px;
      }
    }

    &__expand-indicators {

      @media ($bp-large-max) {
        padding-right: 20px;
      }
    }

    &--last {
      padding-right: 20px;

      &:after {
        display: none;
      }
    }

    svg {
      margin-bottom: -4px;
      transition: opacity 0.4s;
    }

    button {
      border: 2px solid var(--mf-c-bay-blue-50-tint);
      background: transparent;
      width: 27px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    &__expand-indicators {
      display: none;
      margin-left: 4px;
    }

    a, button {
      color: var(--mf-c-primary);
      display: inline-block;
      font-size: $fonts-smaller;
      line-height: 1;
      padding: 2px 0;
      font-weight: $fonts-semibold;
      text-decoration: none;

      &:hover {
        text-shadow: 0px 0px 0px var(--mf-c-primary) ;
      }
    }

    button {
      font-weight: 600;
      will-change: border;
      transition: border 0.4s;

      &:hover {
        border: 2px solid var(--mf-c-primary);
      }
    }

    a {
      box-shadow: inset 0 0 var(--mf-c-white), inset 0px -1px var(--mf-c-bay-blue-lighter);

      svg {
        fill: var(--mf-c-primary);
        transition: fill 0.4s;
        will-change: fill;
      }

      &:hover {
        box-shadow: inset 0 0 var(--mf-c-white), inset 0px -2px var(--mf-c-bay-blue-30-tint);

        svg {
          fill: var(--mf-c-link);
          stroke: var(--mf-c-bay-blue-50-tint);
        }
      }



      &.ma__breadcrumbs__item__icon-link {
        box-shadow: none;
        padding: 5px 3px;
        margin-left: -3px;

        &:hover {
          box-shadow: none;
        }
      }
    }
  }

  &__chevron-back {

    @include ma-chevron("left");

    &:before {
      border-width: 2px;
      height: 7px;
      margin-right: 5px;
      width: 7px;
      border-color: var(--mf-c-gray-dark);
    }

    &:after {
      content: none;
    }
  }

  &__sub-items {

    @include ma-reset-list;
    display: none;
    padding: 0 15px;
    position: absolute;
    width: auto;
    z-index: $z-dropdown;

    .is-open ~ & {
      display: block;
    }
  }

  &__sub-item {
    display: block;
    white-space:nowrap;
  }

  &--light &__items {

      @media ($bp-medium-min) {
        border-top: none;
        border-bottom: 1px solid;
        box-sizing: border-box;
      }
  }

  &--no-bottom-border &__items {
    border-bottom: 0;
  }

  &--light &__container {

    @media ($bp-medium-max) {
      border-bottom: 1px solid;
    }
  }

  &--mobile-scroll {

    .ma__breadcrumbs__container {

      @media ($bp-large-max) {

        &::-webkit-scrollbar {
          height: $breadcrumbs-scrollbar-height;
        }

        /* Track */

        &::-webkit-scrollbar-track {
          background: mix($c-bg, $c-granite-gray, 80);
        }

        /* Handle */

        &::-webkit-scrollbar-thumb {
          background: mix($c-bg, $c-granite-gray, 50);
        }
      }
    }
  }
}

//theme

.ma__breadcrumbs {

  @media ($bp-medium-min) {
    background-color: var(--mf-c-bg-section);

    &__items {
      border-top-color: var(--mf-c-bd-divider);
    }
  }

  &__label {
    font-weight: $fonts-bold;
  }

  &__sub-items {
    background-color: var(--mf-c-bg);
    box-shadow: $box-shadow;
  }

  &--light {
    background-color: var(--mf-c-bg);
  }

  &--light &__items {

    @media ($bp-medium-min) {
      border-bottom-color: var(--mf-c-bd-divider);
    }
  }

  &--light &__container {

    @media ($bp-medium-max) {
      border-bottom-color: var(--mf-c-bd-divider);
    }
  }
}