@use '../../variables' as *;

$b: '.breadcrumbs';

#{$b} {
    color: $breadcrumbs-color;
    display: flex;

    @include font($breadcrumbs-font);

    &__mobile-toggle {
        margin-right: 4px * 2;

        @media (--tablet-landscape-up) {
            display: none;
        }
    }

    &__icon {
        display: block;
        fill: $breadcrumbs-mobile-toggle-color;
        height: 4px * 4;
        width: 4px * 4;
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -4px;

        &_active {
        }
    }

    &__item {
        margin-bottom: 4px;

        &:not(:last-child) {
            @media (--tablet-portrait-down) {
                display: none;

                #{$b}__list_active & {
                    display: block;
                }
            }

            &::after {
                color: $breadcrumbs-item-arrow-color;
                content: '→';
                margin-left: 6px;
                margin-right: 6px;
            }
        }
    }
}