/*------------------------------------*\
    $BREADCRUMBS
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

// fixed vars
$breadcrumbs__colour: settings.$ds_colour__text--secondary;
$breadcrumbs__font-size: settings.$small-size--fixed;

.ds_breadcrumbs {
    color: $breadcrumbs__colour;
    display: flex;
    flex-wrap: wrap;
    font-size: $breadcrumbs__font-size;
    line-height: 1.5rem;
    padding-left: 0;
    margin: 1.5rem 0 1rem;

    &__item {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    &__item:not(:first-child){
        .ds_breadcrumbs__link {
            margin-left: -0.125rem; // Negative margin to offset the 2px outline on links
        }

        &::before {
            @include helpers.ds_chevron(right, 0.333333em);
            margin: 0 0.5rem 0 0.375rem;
            position: relative;
            top: -0.0625rem;
        }
    }

    &__container {
        padding-top: 1rem;
    }

    @include helpers.ds_media-query(medium) {
        &__container {
            padding-top: 1.5rem;
        }
    }
}

.ds_reversed .ds_breadcrumbs {
    color: settings.$ds_colour__text--reversed;
}