@use "../../styles/mixins/link";
@use "../../styles/mixins/icon-text.scss";
@use "../../styles/variables";

.thy-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;

    .thy-breadcrumb-icon {
        margin-right: 8px;
        color: variables.$breadcrumb-icon-color;
    }

    .thy-breadcrumb-item {
        margin-right: 8px;
        color: variables.$breadcrumb-text-color;
        @include icon-text.icon-text-size(8px, 8px);
        a {
            @include link.link-variant(variables.$breadcrumb-text-color, none, variables.$primary, none);
            @include icon-text.icon-text-variant(variables.$breadcrumb-text-color, variables.$primary);
            @include icon-text.icon-text-size(8px, 8px);
        }
        &:last-child {
            color: variables.$breadcrumb-active-color;
            @include icon-text.icon-text-variant(variables.$breadcrumb-text-color);
            a {
                @include link.link-variant(variables.$breadcrumb-active-color, none, variables.$primary, none);
            }
            .separator-icon,
            .default-icon {
                display: none;
            }
        }
        .separator-icon,
        .default-icon {
            margin-left: 8px;
            color: variables.$breadcrumb-separator-color;
            font-size: variables.$font-size-base;
        }

        &.thy-breadcrumb-item-ellipsis .ellipsis-action {
            opacity: unset;
            .thy-icon {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }

    &.thy-breadcrumb-separator {
        .thy-breadcrumb-item {
            .separator-icon,
            .default-icon {
                display: none;
            }
            &::after {
                font: normal normal normal 14px/1 wtf;
                margin-left: 8px;
                color: variables.$breadcrumb-separator-color;
            }
            &:last-child {
                &::after {
                    display: none;
                }
            }
        }
    }

    &.thy-breadcrumb-separator-slash {
        .thy-breadcrumb-item {
            &::after {
                content: '/';
            }
        }
    }

    &.thy-breadcrumb-separator-backslash {
        .thy-breadcrumb-item {
            &::after {
                content: '\\';
            }
        }
    }

    &.thy-breadcrumb-separator-vertical-line {
        .thy-breadcrumb-item {
            &::after {
                content: '|';
            }
        }
    }
}
