.breadcrumb {
  padding-top: 12px;
  padding-bottom: 12px;

  @media (min-width: 1024px) {
    &.desktop-breadcrumb {
      display: block;
      visibility: visible;
    }
    &.mobile-breadcrumb {
      display: none;
      visibility: hidden;
    }
  }

  @media (max-width: 1023px) {
    &.desktop-breadcrumb {
      display: none;
      visibility: hidden;
    }
    &.mobile-breadcrumb {
      display: block;
      visibility: visible;
    }
  }

  & > ol {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    list-style-type: none;

    & > li {
      position: relative;
      display: block;
      list-style: none;

      &.ellipsis {
        overflow: hidden;
      }
    }
  }

  &.breadcrumb-mode-light {
    background-color: transparent;

    .breadcrumb__link,
    .breadcrumb__button {
      color: var(--Brand-Gray-700);
      transition-property: color, background-color;
      transition-duration: var(--transition-duration);
      transition-timing-function: var(--transition-timing-function);

      &:focus-visible {
        border: 1px solid var(--Brand-Primary-Blue-500);
      }

      & .breadcrumb-button__icon {
        color: var(--Brand-Gray-500);
        transition-property: color;
        transition-duration: var(--transition-duration);
        transition-timing-function: var(--transition-timing-function);
      }

      &:hover,
      &.breadcrumb__button--selecting {
        background-color: var(--Brand-Primary-Blue-50);
        color: var(--Brand-Primary-Blue-500);

        & .breadcrumb-button__icon {
          color: var(--Brand-Primary-Blue-500);
        }
      }
    }

    .breadcrumb__link--activated,
    .breadcrumb__button {
      color: var(--brand-bw-black);
    }
  }

  &.breadcrumb-mode-dark {
    background-color: var(--transparent-black-20);
    backdrop-filter: blur(24px);

    .breadcrumb__link,
    .breadcrumb__button {
      color: var(--transparent-white-85);
      text-shadow:
        0px 2px 4px #17181c3d,
        0px 30px 50px #17181c1f,
        0px 10px 38px #17181c14,
        0px 0px 20px #17181c1a;

      & .breadcrumb-button__icon {
        color: var(--transparent-white-50) !important;
      }

      &:focus-visible {
        border: 1px solid var(--transparent-white-85);
      }

      &:hover,
      &.breadcrumb__button--selecting {
        color: var(--brand-bw-white);
        background-color: var(--transparent-gray-40040);
        box-shadow:
          0px 2px 5px -4px rgba(23, 24, 28, 0.12),
          0px 9px 32px 4px rgba(23, 24, 28, 0.05),
          0px 4px 8px 0px rgba(23, 24, 28, 0.06),
          0px 4px 16px 0px rgba(23, 24, 28, 0.04);
        backdrop-filter: blur(24px);
      }
    }

    .breadcrumb__link--activated,
    .breadcrumb__button {
      color: var(--brand-bw-white);
    }
  }
}

.breadcrumb__dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin: 8px;
  background-color: var(--Brand-Gray-500);
}

.breadcrumb__link {
  font-size: var(--caption1-font-size);
  line-height: var(--caption1-line-height);
  letter-spacing: var(--caption1-letter-spacing);
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  border: 1px solid transparent;
  border-radius: 8px;
  transition-property: background-color, color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  -webkit-tap-highlight-color: transparent;
}

.breadcrumb-dropdown {
  position: relative;
}

.breadcrumb__button {
  padding: 2px 4px !important;
  font-size: var(--caption1-font-size);
  line-height: var(--caption1-line-height);
  letter-spacing: var(--caption1-letter-spacing);
  cursor: pointer;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 3px;
  background-color: transparent;
  border-radius: 8px;
  border: 1px solid transparent;
  outline: none;
  transition-property: background-color, color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}

.breadcrumb-button__icon {
  [aria-expanded='true'] & {
    transform: rotate(180deg);
  }
}