$breadcrumb-chevron-height: 0.65rem;

.ons-breadcrumbs-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: -2rem;
    &--grey {
        background-color: var(--ons-color-banner-bg);
    }

    &--dark {
        background-color: var(--ons-color-hero-bg-dark);
    }

    &--navy-blue {
        background-color: var(--ons-color-navy-blue-light);
        margin-bottom: -1.75rem;
        @include mq(l) {
            margin-bottom: -3.25rem;
        }
    }

    &--dark,
    &--navy-blue {
        .ons-icon {
            color: var(--ons-color-text-inverse);
        }

        .ons-breadcrumbs__link {
            color: var(--ons-color-text-inverse);
            text-decoration: underline;

            &:hover {
                color: var(--ons-color-text-inverse);
                text-decoration: underline solid var(--ons-color-text-inverse) 2px;
            }

            &:focus {
                color: var(--ons-color-text);
            }

            &:focus:hover {
                text-decoration: none;
            }
        }
    }

    &--pale-blue {
        background-color: var(--ons-color-pale-blue);
    }
    .ons-breadcrumbs {
        padding: 1rem;
    }
}

.ons-breadcrumbs {
    align-items: center;
    display: flex;
    padding: 1rem 0;

    &__items {
        margin: 0;
        padding: 0;
    }

    &__item {
        display: inline-block;
        margin: 0;
        white-space: nowrap; // Stop items from wrapping, break on chevron only

        &:not(:nth-last-child(1)) {
            // Small screen not last child
            display: none;
        }

        .ons-icon {
            height: $breadcrumb-chevron-height;
            margin: 0 0.25rem;
            vertical-align: middle;
            width: $breadcrumb-chevron-height;
        }

        &:nth-last-child(1) {
            // Small screen last child
            direction: rtl;
            .ons-icon {
                margin-left: -0.13rem;
                transform: rotate(180deg);
            }
        }

        @include mq(s) {
            // Big screen
            &:not(:nth-last-child(1)) {
                // not last child
                display: inline-block;
            }

            &:nth-last-child(1) {
                // Last child
                direction: ltr;
                .ons-icon {
                    display: none;
                }
            }

            &:first-child:nth-last-child(1) {
                // First and last child
                direction: rtl;
                .ons-icon {
                    display: inline-block;
                    vertical-align: middle;
                }
            }

            &:not(:last-child).ons-icon {
                // Not last child
                margin: 0;

                // We have to override the icon settings so it renders correctly in ie11
                background-position: center center;
                vertical-align: middle;
            }
        }
    }

    &__link {
        color: var(--ons-color-text);
        text-decoration: underline;

        &:hover {
            color: var(--ons-color-text);
            text-decoration: underline solid var(--ons-color-text) 2px;
        }
    }
}