//
//  DIALTONE
//  COMPONENTS: BREADCRUMBS
//
//  These are breadcrumb classes for Dialpad's design system Dialtone.
//  For further information, visit https://dialtone.dialpad.com/components/breadcrumbs
//
//  TABLE OF CONTENTS
//  • WRAPPER
//  • INVERTED STYLE
//  • ITEMS & LINKS
//

.d-breadcrumbs {
    --breadcrumbs-font-size: var(--dt-font-size-200);
    --breadcrumbs-line-height: var(--dt-font-line-height-300);
    --breadcrumbs-color-separator: var(--dt-color-black-500);
    --breadcrumbs-color-text: var(--dt-color-link-muted);

    //  ============================================================================
    //  $  INVERTED STYLE
    //  ----------------------------------------------------------------------------
    &--inverted {
        --breadcrumbs-color-separator: var(--dt-color-black-400);
        --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
    }

    //  ============================================================================
    //  $  WRAPPER
    //  ----------------------------------------------------------------------------

    > ol {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: var(--breadcrumbs-font-size);
        line-height: var(--breadcrumbs-line-height);
        list-style: none;
    }

    //  ============================================================================
    //  $  ITEMS & LINKS
    //  ----------------------------------------------------------------------------
    &__item {
        position: relative;
        margin: 0 0 0 var(--dt-space-400);
        padding: 0;
        list-style: none;

        //  Provide a forward slash with each element except when it's the last one.
        &:not(:last-of-type) {
            margin-right: var(--dt-space-450);

            &::before {
                position: absolute;
                right: var(--dt-space-450-negative);
                margin-top: var(--dt-space-100-negative);
                color: var(--breadcrumbs-color-separator);
                content: '/';
            }
        }

        .d-link {
            color: var(--breadcrumbs-color-text);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        //  --  SELECTED STATE (CURRENT PAGE)
        &--selected {
            --breadcrumbs-color-text: var(--dt-color-foreground-primary);

            font-weight: var(--dt-font-weight-medium);
            cursor: default;

            .d-breadcrumbs--inverted & {
                --breadcrumbs-color-text: var(--dt-color-foreground-primary-inverted);
            }
        }
    }
}