/*
// .breadcrumb
*/
@import '../variables';
@import '../constants';
@import '../mixins/direction';
@import '../mixins/breakpoints';


$local-debug: false;
$local-height: 21px;
$local-padding-x-base: $TAN-30 * $local-height;
$local-padding-x: 3px;
$local-gutter-x: 5px;
$local-gutter-y: 4px;
$local-spaceship-search-width-xxl: 480px;
$local-spaceship-search-width-xl: 440px;
$local-spaceship-safe-area-expand: 20px;
$local-title-safe-area-expand: 64px;


@mixin local-debug($color, $title) {
    background: rgba($color, .2);
    border-radius: 2px;

    &:before {
        padding: 0 6px;
        display: flex;
        align-items: center;
        height: 100%;
        content: $title;
        color:  darken(rgba($color, .6), 25%);
        font-size: 11px;
        font-weight: $font-weight-medium;
        text-transform: uppercase;
    }
}


.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 20px;
    font-size: 14px;
    color: $breadcrumb-font-color;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &:after {
        content: '';
        clear: both;
    }
}
.breadcrumb__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    gap: 12px;
    flex-wrap: wrap;
}
.breadcrumb__item {
    margin-top: 0;
    margin-inline-end: 0;
    float: none;
    white-space: nowrap;
}
.breadcrumb__item-link {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 0;
    height: $local-height;
    padding: 0 ($local-padding-x-base + $local-padding-x);
    pointer-events: none;

    &,
    &:hover {
        color: inherit;
    }

    &:before,
    &:after {
        pointer-events: auto;
        position: absolute;
        background-color: $breadcrumb-normal-bg-color;
        top: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 3px;
        transition: background .1s;
    }

    &:before {
        content: '';

        @include direction {
            #{$inset-inline-start}: ($local-padding-x-base / 2);
            #{$inset-inline-end}: ($local-padding-x-base / 2);
            transform: skewX(#{-30deg * $transform-direction});
        }
    }
}
.breadcrumb__item--first {
    .breadcrumb__item-link {
        @include direction {
            #{$padding-inline-start}: ($local-padding-x + 4px);
        }

        &:after {
            content: '';

            @include direction {
                #{$inset-inline-start}: 0;
                #{$inset-inline-end}: $local-padding-x-base;
            }
        }
    }
}
.breadcrumb__item--parent {
    .breadcrumb__item-link:hover {
        &:before,
        &:after {
            background-color: $breadcrumb-hover-bg-color;
        }
    }
    .breadcrumb__item-link:active {
        &:before,
        &:after {
            transition-duration: 0s;
            background-color: $breadcrumb-active-bg-color;
        }
    }
}
.breadcrumb__item--last {
    @include direction {
        #{$margin-inline-end}: 0;
    }
}


.breadcrumb__title-safe-area {
    display: none;
}
.breadcrumb__spaceship-safe-area {
    display: none;
}