@use '../abstracts/variables' as *;

.breadcrumbs {
    
    &__list {
        display: flex;
        gap: 0.75rem;
    }

    &__item {
        position: relative;
        display: inline-flex;
    }

    &__seperator {
        margin: 0.5rem 0;
        display: flex;
        border-right: 2px solid $color-border;
        transform: rotate(15deg);
    }

    &__button {
        padding: 0 0.75rem;
        height: 100%;
        color: $color-text-muted
    }

    &__button--select {
        padding: 0 0.25rem;
    }

    &--compact {

        .breadcrumbs {

            &__button {
                padding: 0.25rem;
                font-size: 0.75rem;
            }

        }

    }

}