@layer components {
    :root {
        --breadcrumb-padding: 0 0.5rem;
        --breadcrumb-font-size: var(--text-sm);
        --breadcrumb-font-weight: var(--font-weight-light);
        --breadcrumb-font-weight-last: var(--font-weight-semi-bold);
        --breadcrumb-icon-height: 0.375rem;
        --breadcrumb-icon-width: 0.375rem;
        --breadcrumb-icon-border-top: 1px;
        --breadcrumb-icon-border-right: 1px;
        --breadcrumb-gap-left: 0.5rem;
        --breadcrumb-gap-right: 0.75rem;
        --breadcrumb-icon-rotate: 45deg;
    }

    .breadcrumb {
        padding: var(--breadcrumb-padding);
        font-size: var(--breadcrumb-font-size);
        font-weight: var(--breadcrumb-font-weight);
        overflow-x: auto;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb ol {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .breadcrumb ol > li {
        display: flex;
        align-items: center;
    }

    .breadcrumb li {
        padding: 0;
        margin: 0;
    }

    .breadcrumb li:not(:last-child) {
        text-decoration: none;
    }

    .breadcrumb li:not(:last-child) a {
        text-decoration: underline;
    }

    .breadcrumb li:last-child {
        font-weight: var(--breadcrumb-font-weight-last);
    }

    .breadcrumb ol > li + *:before {
        content: '';
        margin-left: var(--breadcrumb-gap-left);
        margin-right: var(--breadcrumb-gap-right);
        display: inline-block;  
        height: var(--breadcrumb-icon-height);
        width: var(--breadcrumb-icon-width);
        transform: rotate(var(--breadcrumb-icon-rotate));
        border-top: var(--breadcrumb-icon-border-top) solid;
        border-right: var(--breadcrumb-icon-border-right) solid;
        background-color: transparent;
        vertical-align: middle;
    }
}