/**
 * Breadcrumb Item
 */

.breadcrumb-item {
    margin-bottom: 0;
    padding-left: var(--breadcrumb--padding-left, var(--padding-left));
    color: var(--breadcrumb--color);

    a {
        color: var(--breadcrumb--color);

        &[href],
        &[to] {
            color: var(--breadcrumb--link--color, var(--breadcrumb--color));
        }
    }

    &.-active {
        color: var(--breadcrumb--active--color, var(--breadcrumb--color));
    }

    > span {
        display: inline-block;
    }

    &:first-of-type {
        padding-left: 0;
    }

    // The separator between breadcrumbs (by default, a forward-slash: "/")
    + .breadcrumb-item {
        &::before {
            padding-right: var(--breadcrumb--padding-right, var(--padding-right));
            display: inline-block; // } Suppress underlining of the separator in modern browsers
            content: var(--breadcrumb--separator, '/');
        }
    }

    // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
    // without `<ul>`s. The `::before` pseudo-element generates an element
    // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
    //
    // To trick IE into suppressing the underline, we give the pseudo-element an
    // underline and then immediately remove it.
    // stylelint-disable-next-line no-duplicate-selectors
    + .breadcrumb-item:hover::before {
        text-decoration: underline;
    }

    // Check the above for duplication
    // stylelint-disable-next-line no-duplicate-selectors
    + .breadcrumb-item:hover::before {
        text-decoration: none;
    }

    :not([href], [to]) {
        text-decoration: none;
    }

    [href],
    [to] {
        cursor: pointer;
    }
}