@import "mixin", "color";

.crumbs-1 {
    list-style: none;
    overflow: hidden;
    font-size: 12px;
}

.crumbs-1 li {
    background: $content-background-color;
    border: 1px solid $content-border-color;
    padding: 10px 10px 10px 20px;
    position: relative;
    display: block;
    float: left;
    text-shadow: -1px -1px 1px #ffffff;
    cursor: pointer;

    @include box-shadow-out(#ffffff);

    &:first-child {
        @include border-left-radius(3px);
    }
}

.crumbs-1 .last {
    padding-right: 20px;
    @include border-right-radius(3px);
}

.crumbs-1 li:not(.last):after, .crumbs-1 li:before {
    content:" ";
    display: block;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 14px solid $content-background-color;
    position: absolute;
    top: 50%;
    margin-top: -18px;
    left: 100%;
}

.crumbs-1 .last:before {
    border: none;
}

.crumbs-1 li:not(.last):after {
    z-index: 2;
}

.crumbs-1 li:before {
    border-left-color: $content-border-color;
    margin-left: 1px;
    z-index: 1;
}

.crumbs-1 .active, .crumbs-1 li:hover {
    background: #ffffff;
}

.crumbs-1 .active {
    cursor: default;
}

.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after  {
    border-left: 14px solid #ffffff;
}