@layer components {
  .breadcrumbs {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 80rem;
    min-width: 0;
    margin: 0 auto 1.25rem;
  }

  .breadcrumbs__list {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    list-style: none;
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--color-white), var(--color-slate-100));
    box-shadow: 7px 7px 16px color-mix(in srgb, var(--color-slate-900) 10%, transparent),
                -7px -7px 16px color-mix(in srgb, var(--color-white) 90%, transparent),
                inset 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .breadcrumbs__item {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--color-slate-500);

    &:first-child {
      flex-shrink: 0;
    }

    &:last-child {
      flex: 0 0 auto;
      max-width: min(40ch, 35vw);
    }
  }

  .breadcrumbs__link {
    min-width: 0;
    margin: -0.25rem 0;
    overflow: hidden;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radius-md);
    color: var(--color-slate-600);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--default-transition-duration) var(--default-transition-timing-function),
                background-color var(--default-transition-duration) var(--default-transition-timing-function);

    &:hover {
      background-color: var(--color-blue-50);
      color: var(--color-blue-700);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .breadcrumbs__separator {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-inline: 0.25rem;
    color: var(--color-slate-300);
  }

  .breadcrumbs__current {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--color-slate-900);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}