@use "sass:map";
@use "./breadcrumb.config" as config;

@mixin ss-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: map.get(config.$ss-breadcrumb-config, gap);

    margin: 0;
    padding: 0;
    list-style: none;

    font-size: map.get(config.$ss-breadcrumb-config, font-size);
    color: map.get(config.$ss-breadcrumb-config, color);
}

@mixin ss-breadcrumb-separator {
    content: var(--ss-breadcrumb-separator, "#{map.get(config.$ss-breadcrumb-config, separator)}");
    color: map.get(config.$ss-breadcrumb-config, separator-color);
    // The flex `gap` already spaces the item before the separator.
    margin-inline-end: map.get(config.$ss-breadcrumb-config, gap);
}