@import "app/styles/variables";

bl-breadcrumb-group {
    $header-margin: 4px;
    $separation: 3px;
    $height: $header-height - 2 * $header-margin;
    $half-height: $height / 2;
    $color: map-get($breadcrumb-color, bg);
    $hover-color: map-get($breadcrumb-color, hover-bg);
    display: block;
    height: $height;
    margin-top: $header-margin;

    ul {
        display: flex;
        margin: 0;
    }

    ul > bl-breadcrumb {
        display: flex;
        align-items: center;
        height: $height;
        background: $color;
        padding: 0 2px;
        position: relative;
        margin: 0 ($half-height + $separation) 0 0;
        text-decoration: none;
        min-width: 40px;
        max-width: 140px;
        cursor: pointer;
        color: map-get($breadcrumb-color, text);

        &:after {
            content: "";
            border-top: $half-height solid transparent;
            border-bottom: $half-height solid transparent;
            border-left: $half-height solid $color;
            position: absolute;
            right: -$half-height;
            top: 0;
        }

        &:not(:first-child):before {
            content: "";
            position: absolute;
            border-width: $half-height 0 $half-height $half-height;
            border-style: solid;
            border-color: $color $color $color transparent;
            left: -$half-height;
        }

        &:hover {
            background: $hover-color;

            &:after {
                border-left: $half-height solid $hover-color;
            }

            &:before {
                border-color: $hover-color $hover-color $hover-color transparent;
            }
        }

        > .crumb-icon {
            margin-left: 3px;
        }

        > .crumb-content {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
            text-align: left;
            font-size: 12px;
            line-height: 16px;
            height: 100%;
            display: flex;
            align-items: center;
            margin-left: 3px;

            &.invert-ellipsis {
                direction:rtl;
                text-align:left;
            }
        }
    }
}
