/**
 * This file provides the design styles for the breadcrumb
 */

.breadcrumbs {
    position: relative;
    min-height: @page-header_height;
    box-sizing: border-box;
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-shade-4);
    padding: 1rem 1.8rem .2rem;

    @media @screen_max-xs {
        padding-left: @margin-small;
        padding-right: .75rem;
    }

    > p {
        font-size: @font-size-small;
        margin: 0;

        @media @screen_max-xs{
            width: 1px;
            position: relative;
            overflow: hidden;
            height: 1.6rem;
        }

        * {
            font-size: @font-size-small;
        }

        .bchead {
            .sr-only();
        }

        span.home {
            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned

            .wide-content & {
                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
            }

            a {
                .fontello();
                .hide-text-show-before();
                .icon-home();

                min-height: 1.8em;
                min-width: 1.9em;
                width: auto;
                box-sizing: border-box;
                background-color: var(--color-shade-1);
                border: solid .1em transparent;
                border-radius: 0.5rem;
                vertical-align: middle;
                text-decoration: none;
                margin-top: -.2em;
                transition: var(--transition-glow);

                &:before {
                    color: var(--color-foreground);
                    font-size: @font-size-default + (@font-scale-factor * 2);
                    margin-top: .17rem;
                }

                &:hover,
                &:focus,
                &:active {
                    &:before {
                        color: var(--color-glow-primary);
                    }

                    background-color: transparent;
                    border-color: var(--color-glow-primary);
                    color: var(--color-glow-primary);
                    filter: var(--filter-glow-primary);
                }
            }
        }

        bdi {
            padding: .1em .1em 0;
        }
    }
}