@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/breadcrumb';

@mixin msk-breadcrumb {
    @include breadcrumb.breadcrumb;

    $msk--breadcrumb-icon-next: 'chevron_right';

    .#{$prefix}--breadcrumb {
        @media (width >= 500px) {
            display: flex;
            flex-wrap: wrap;
        }

        .#{$prefix}--breadcrumb-item {
            .#{$prefix}--link {
                &:is(a) {
                    color: tk.$msk--color-content-link;
                    text-decoration: underline;

                    &:hover {
                        color: tk.$msk--color-content-link-hover;
                    }

                    &:focus-visible {
                        outline-offset: 0; // overwrite chrome user agent style
                    }
                }
                &:not(a),
                &.#{$prefix}--breadcrumb-item--current {
                    color: tk.$msk--color-content-primary;
                    text-decoration: none;

                    &:hover {
                        text-decoration: none;
                    }
                }
            }
            &.#{$prefix}--breadcrumb-item--current {
                .#{$prefix}--link {
                    &:is(a) {
                        color: c.$msk--warm-gray-100;
                        text-decoration: none;

                        &:hover {
                            text-decoration: none;
                        }
                    }
                }
            }

            &:not(:last-of-type)::after {
                color: tk.$msk--color-content-link;
                content: $msk--breadcrumb-icon-next;
                font-family: msk-icon;
            }

            &:last-of-type::after {
                content: '';
            }
        }
    }
}