@use 'sass:map';
@use 'theme';
@use '../../tools/breakpoint';
@use '../../tools/svg';
@use '../../tools/typography';

.Breadcrumbs {
    @include typography.generate(theme.$typography);

    width: 100%;
    color: theme.$color;
}

.Breadcrumbs > ol,
.Breadcrumbs > ol > li {
    display: flex;
    gap: theme.$gap-mobile-up;

    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
        gap: theme.$gap-tablet-up;
    }
}

.Breadcrumbs > ol {
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.Breadcrumbs > ol > li {
    align-items: center;
}
