/* ============================================================================
   06-COMPONENTS -> #BREADCRUMBS
   ========================================================================= */

/**
 * Highlights the current page and visualises the hierarchy of content.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Breadcrumbs
 */

.breadcrumbs {
    --breadcrumbs-bg: transparent;
    --breadcrumbs-item-color: var(--text-color-secondary);
    --breadcrumbs-item-divider-color: var(--text-color-tertiary);
    --breadcrumbs-item-divider-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --breadcrumbs-item-divider-size: var(--space-4);
    --breadcrumbs-item-font-weight: var(--font-weight-semi-bold);
    --breadcrumbs-item-hover-color: var(--link-color);
    --breadcrumbs-item-active-color: var(--link-color);

    align-items: flex-start;
    background-color: var(--breadcrumbs-bg);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}


/**
 * Breadcrumbs list
 */

.breadcrumbs__list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
}


/**
 * Breadcrumbs item
 */

.breadcrumbs__item {
    align-items: center;
    display: flex;
    margin-top: 0;
    
    &:not(:last-child) {
        &::after {
            background-color: var(--breadcrumbs-item-divider-color);
            content: '';
            display: inline-block;
            height: var(--breadcrumbs-item-divider-size);
            mask-image: var(--breadcrumbs-item-divider-icon);
            -webkit-mask-image: var(--breadcrumbs-item-divider-icon);
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-size: cover;
            -webkit-mask-size: cover;
            margin-left: var(--space-3);
            margin-right: var(--space-3);
            width: var(--breadcrumbs-item-divider-size);
        }
    }
}


/**
 * Breadcrumbs link
 */

.breadcrumbs__link {
    @include font-size('sm');
    @include transition('color');
    align-items: center;
    color: var(--breadcrumbs-item-color);
    display: flex;
    font-weight: var(--breadcrumbs-item-font-weight);
    justify-content: center;
    text-decoration: none;

    &:hover {
        color: var(--breadcrumbs-item-hover-color);
    }

    &[aria-current] {
        color: var(--breadcrumbs-item-active-color);
    }
}