.crumbs-1, .crumbs-2 {
    list-style: none;
    overflow: hidden;
    font-size: 1rem;
    user-select: none;
    display: flex;

    li {
        background: var(--box-bg);
        border-left: 1px solid var(--bborder);
        border-top: 1px solid var(--bborder);
        border-bottom: 1px solid var(--bborder);
        padding: 0 10px 0 20px;
        height: 2.5rem;
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer;

        &:after, &:before {
            content:" ";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 14px solid var(--box-bg);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            left: 100%;
        }

        &:after {
            z-index: 1;
        }

        &:before {
            border-left-color: var(--bborder);
            margin-left: 1px;
            z-index: 1;
        }

        &.active:after, &:hover:after  {
            color: var(--txt-on-bg-c-2);
        }

        &.active:after  {
            border-left: 14px solid var(--btn-bg);
        }

        &:hover:after  {
            border-left: 14px solid var(--btn-bg-hover);
        }
    }

    .active {
        cursor: default;
        background: var(--btn-bg);
    }

    .active, li:hover {
        color: var(--txt-on-bg-c-2);
    }

    li:hover {
        background: var(--btn-bg-hover);
    }
}

.crumbs-1 {
    li {
        &:not(:last-child):after, &:before {
            content:" ";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 14px solid var(--box-bg);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            left: 100%;
        }

        &.active:not(:last-child):after, &:hover:not(:last-child):after  {
            color: var(--txt-on-bg-c-2);
        }

        &.active:not(:last-child):after {
            border-left: 14px solid var(--btn-bg);
        }

        &:hover:not(:last-child):after  {
            border-left: 14px solid var(--btn-bg-hover);
        }
    }

    :last-child {
        &:before {
            border: none;
        }
    }
}