@mixin breadcrumb
    padding: 1em 0
    ul
        display: flex
        background: #eee
        box-shadow: inset 0 0 .3em #ccc, 0 0 .5em #ddd
        padding: .3em
        border: 0.05em solid #fff
        border-radius: .3em
        list-style-type: none
        li
            a
                position: relative
                display: inline-flex
                vertical-align: middle
                text-align: center
                align-items: center
                text-decoration: none
                color: #fff
                background: #ccc
                height: 2em
                padding: .5em .5em
                &::after
                    content: ''
                    position: absolute
                    top: 0
                    left: 100%
                    border-top: 1em solid transparent
                    border-bottom: 1em solid transparent
                    border-left: 1em solid #ccc

                    z-index: 2
                &:hover
                    background-color: #777
                    &::after
                        border-left: 1em solid #777
            &:first-child a
                border-top-left-radius: .3em
                border-bottom-left-radius: .3em

            &:not(:first-child) a
                margin-left: .2em
                padding-left: 1.5em
                &::before
                    z-index: 1
                    content: ''
                    position: absolute
                    top: 0
                    left: 0%
                    border-top: 1em solid transparent
                    border-bottom: 1em solid transparent
                    border-left: 1em solid #eee