@import '../../styles/variables';

/**************************************
 * Breadcrumbs
 **************************************/

.breadcrumbs {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 15px;

    > ol {
        display: flex;
        min-width: 0;
        margin: 0;
    }

    .breadcrumb-item {
        display: flex;
        align-items: center;
        min-width: 20px;

        &.breadcrumb-item-last {
            * {
                color: $bdl-gray-80;
            }
        }

        &.no-shrink {
            flex: none;
        }

        * {
            overflow: hidden;
            color: $bdl-gray-50;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
                color: $bdl-gray-80;
            }
        }

        .breadcrumb-toggler {
            font-size: 25px;
            cursor: pointer;

            &:hover,
            &:focus {
                color: $bdl-gray-80;
                outline: none;
            }
        }

        & + .breadcrumb-item::before {
            display: inline-block;
            flex: none;
            width: 8px;
            height: 8px;
            margin: 8px 10px 6px 6px;
            border-color: $bdl-gray-50;
            border-style: solid solid none none;
            border-width: 2px;
            transform: rotate(45deg);
            content: '';
        }
    }

    .icon-home {
        svg {
            width: 16px;
            height: 16px;
        }
    }

    .icon-caret-down {
        flex: none;
        margin-left: 5px;

        svg {
            width: 7px;
        }
    }
}