@layer genr.component {
    .breadcrumb {
        overflow-x: auto;
        max-width: var(--width-lg);
        margin: 1rem auto;
        padding-inline: 1.5rem;

        @media (width > 1280px) {
            padding-inline: 0;
        }

        .icon {
            fill: var(--color-light-patrol);
        }
    }

    .breadcrumb__items {
        display: flex;
        gap: 1rem;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .breadcrumb__item {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .breadcrumb__link {
        display: flex;
        align-items: center;
        text-decoration: none;

        &[aria-current] {
            font-weight: 700;
            letter-spacing: var(--letter-spacing-sm);
        }

        &:not([aria-current]) {
            letter-spacing: var(--letter-spacing-xs);
        }
    }
}