@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;

.cds-breadcrumb {
    display: flex;
    align-items: center;
    color: var(--cds-color-text-muted);
    flex-wrap: nowrap;
    width: 100%;
    gap:vars.$cds-spacing-100;

    &__item {
        @include mixins.cds-paragraph-s;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
        position: relative;

        &.is-active {
            @include mixins.cds-paragraph-s(bold);
            pointer-events: none;
            color: var(--cds-color-accent-primary-main);
        }

        &:not(:last-child)::after {
            content: '»';
            margin-left: vars.$cds-spacing-100;
            color: var(--cds-color-text-muted);
        }

        & a {
            color: var(--cds-color-text-default);

            &:hover {
                color: var(--cds-color-accent-primary-main);
            }
        }
    }
}