@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> NAVIGATION -> BREADCRUMB
    ========================================================================  */

// Check if the elements with breadcrumb should be imported
@if $import-elements and $import-element-breadcrumb {
    .breadcrumb {
        color: $breadcrumb-font-color;
        display: flex;
        flex-wrap: wrap;
        font-size: $breadcrumb-font-size;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: $breadcrumb-element-spacing;

        // Check if the breadcrumb alignment modifiers should be declared
        @if $breadcrumb-alignment-modifiers {
            // Modifiers
            &.breadcrumb--center {
                // Styles
                justify-content: center;
            }

            &.breadcrumb--right {
                // Styles
                justify-content: flex-end;
            }
        }

        // Check if the breadcrumb angle separator modifier should be declared
        @if $breadcrumb-angle-separator-modifier {
            // Modifiers
            &.breadcrumb--angle {
                // Variables
                --separator: '\203A';

                // Nested selectors
                li {
                    // Pseudo elements
                    &::before {
                        // Styles (IE fallback for postcss-css-variables)
                        content: var(--separator);
                    }
                }
            }
        }

        // Check if the breadcrumb arrow separator modifier should be declared
        @if $breadcrumb-arrow-separator-modifier {
            // Modifiers
            &.breadcrumb--arrow {
                // Variables
                --separator: '\02192';

                // Nested selectors
                li {
                    // Pseudo elements
                    &::before {
                        // Styles (IE fallback for postcss-css-variables)
                        content: var(--separator);
                    }
                }
            }
        }

        // Check if the breadcrumb bullet separator modifier should be declared
        @if $breadcrumb-bullet-separator-modifier {
            // Modifiers
            &.breadcrumb--bullet {
                // Variables
                --separator: '\02022';

                // Nested selectors
                li {
                    // Pseudo elements
                    &::before {
                        // Styles (IE fallback for postcss-css-variables)
                        content: var(--separator);
                    }
                }
            }
        }

        // Check if the breadcrumb slash separator modifier should be declared
        @if $breadcrumb-slash-separator-modifier {
            // Modifiers
            &.breadcrumb--slash {
                // Variables
                --separator: '\0002f';

                // Nested selectors
                li {
                    // Pseudo elements
                    &::before {
                        // Styles (IE fallback for postcss-css-variables)
                        content: var(--separator);
                    }
                }
            }
        }

        // Nested selectors
        li {
            // Styles
            display: inline-flex;
            position: relative;

            // Pseudo classes
            &:first-child {
                // Pseudo elements
                &::before {
                    // Styles
                    content: '';
                    font-size: $breadcrumb-font-size;
                    padding: 0;
                }
            }

            // Pseudo elements
            &::before {
                // Styles
                content: $breadcrumb-separator;
                padding: 0 $breadcrumb-content-spacing;
                opacity: 0.5;
            }

            // Nested selectors
            a {
                color: $breadcrumb-link-color;

                // Pseudo classes
                &:hover {
                    color: $breadcrumb-link-color-hover;
                }

                &:focus {
                    color: $breadcrumb-link-color-focus;
                }

                &:active {
                    color: $breadcrumb-link-color-active;
                }
            }

            .breadcrumb__icon {
                // Styles
                align-items: center;
                display: inline-flex;
                justify-content: center;
                margin-right: ($breadcrumb-content-spacing / 2);
            }
        }
    }
}