@import 'constants';
@import 'styling';

.breadcrumb {
    @include breadcrumb-base;


// Separator styles
    &.pointer-separators {
        ul li {
            &::before {
                content: "»";
            }
            &:first-child::before {
                content:  '';
            }
        }
    }
    &.arrow-separators {
        ul li {
            &::before {
                content: "\2192";
            }
            &:first-child::before {
                content:  '';
            }
        }
    }
    &.triangle-separators {
        ul li {
            &::before {
                content: "\25b6";
            }
            &:first-child::before {
                content:  '';
            }
        }
    }
    &.dash-separators {
        ul li {
            &::before {
                content: "\2013";
            }
            &:first-child::before {
                content:  '';
            }
        }
    }
    &.bullet-separators {
        ul li {
            &::before {
                content: "\2022";
            }
            &:first-child::before {
                content:  '';
            }
        }
    }

// Alignment
    &.left {
        ul {
            justify-content: flex-start;
        }
    }

    &.center {
        ul {
            justify-content: center;
        }
    }

    &.right {
        ul {
            justify-content: flex-end;
        }
    }

// Colors
    @if $include-color-palette {
        @include button-colors;
    }

// Sizes
    @each $size, $fontSize in $breadcrumb-font-sizing-padding-list {
        &.#{$size} {
            font-size: $fontSize;
        }
    }

}