@import 'constants';

@mixin breadcrumb-base {
    display: flex;
    font-size: 1rem;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;

    ul {
        align-items: center;
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        justify-content: flex-start;
        list-style: none;
        padding: 0;
        margin-bottom: 1rem;


        li {
            align-items: center;
            display: flex;
            padding: 0;
            margin: 0;


            &::before {
                content: '/';
            }

            &:first-child::before {
                content:  '';
            }

            &.active {
                a {
                    color: $color-black;
                    cursor: default;
                    pointer-events: none;
                }
            }

            &:first-child a {
                padding-left: 0;
            }

            a {
                text-decoration: none;
                color: $color-blue;
                padding: 0 0.75em;

                &:hover, &:focus {
                    color: darken-1($color-blue);
                    text-decoration: underline;
                }
            }
        }
    }
}