@use "../common/utils" as *;
@use "../common/mixins" as *;

.breadcrumbs {
    background: #FFF;
    padding: calc-rem(10px 0);
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(var(--color-border));

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        max-width: 100%;
        overflow-x: auto;

        li {
            position: relative;
            line-height: 1;
            margin-right: calc-rem(22px);
            white-space: nowrap;
            text-overflow: ellipsis;
            display: none;

            @include media-breakpoint-up(lg) {
                display: block;
            }

            a {
                color: rgba(var(--color-text), .65);

                img {
                    width: calc-rem(12px);
                    min-width: calc-rem(12px);
                }
            }

            &:after {
                content: '';
                position: absolute;
                right: calc-rem(-15px);
                top: calc-rem(4px);
                width: calc-rem(6px);
                height: calc-rem(6px);
                background: url('../images/icons/icon-chevron-right.svg') no-repeat center center;
                background-size: contain;
            }

            &:first-child {
                display: block;
            }

            &:last-child {
                margin-right: 0;
                display: block;

                a {
                    text-decoration: underline;
                    text-underline-offset: calc-rem(2px);
                }

                &:after {
                    display: none;
                }
            }
        }
    }
}
