/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../mixins";
@import "../variables/breadcrumbs_vars";


.dlt-breadcrumbs {
    @include component-vars(breadcrumbs); //Mixin to define all the root variables
    list-style: none;
    width: 100%;
    max-width: 48rem;
    margin: 0;
    padding: 0;
    font-family: $breadcrumbs-font-family;
    font-size: $breadcrumbs-font-size;
    line-height: $breadcrumbs-line-height;
    display: flex;
    flex-direction: row;
    align-items: center;

    li {
        color: $breadcrumbs-color-text-static-muted;
        display: flex;
        flex-direction: row;
        align-items: center;
        &::before {
            content: "\e970";
            font-family: "dlt-icons";
            font-size: $breadcrumbs-icon-size;
            color: $breadcrumbs-color-icon-muted-secondary;
            padding: 0 .125rem;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;

            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        &:first-of-type::before {
            display: none;
        }

        .dlt-dropdown .dlt-button{
            background: transparent;
            padding: 0;
            outline: 0;
            border: 0;
            color: $breadcrumbs-color-link;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
            }
            
            &:focus {
                text-decoration: none;
                outline: var(--dlt-border-width-hover, 2px) solid var(--dlt-links-color-border, var(--dlt-component-color-interactive-primary-default, var(--dlt-color-background-interactive-primary-default, #1776BF)));            }
        }

        > a {
            color: $breadcrumbs-color-link;

            [aria-current="page"] {
                color: $breadcrumbs-color-text-static-muted;
                text-decoration: none;
                pointer-events: none;

                &:hover,
                &:focus,
                &:active {
                    color: $breadcrumbs-color-text-static-muted;
                    text-decoration: none;
                    pointer-events: none;
                }
            }
        }
    }

    .has-submenu {
        position: relative;

        .dlt-overflow-menu {
            //top: initial;

            &:after {
                margin: 0;
                right: 1rem;
                margin-left: -19px;
            }
        }
        &:hover .dlt-overflow-menu {
            display: block;
        }
    }
    .has-submenu>a {
        line-height: 1.875rem;
    }
}

.lg-breadcrumb {
    font-size: $breadcrumbs-font-size-lg;

    .dlt-links {
        font-size: $breadcrumbs-font-size-lg;
    }
}

.sm-breadcrumb {
    font-size: $breadcrumbs-font-size-sm;

    .dlt-links {
        font-size: $breadcrumbs-font-size-sm;
    }
}