@use "../core/instances" as *;

.documentationpage {
    .page_breadcrumb {
        @include user-select;
        margin-bottom: 24px;

        @include brp($b6) {
            margin-bottom: 18px;
        }

        @media print { display: none; }

        .page_breadcrumb_list {
            @include border-radius(16px);
            @include bc(rgba($c16, 0.08), var(--theme_text_alt));
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
            max-width: 100%;
            box-sizing: border-box;
            padding: 7px 12px;
            list-style: none;
        }

        .page_breadcrumb_item {
            @include font(szrem(14), $f2, bold);
            @include text;
            display: inline-flex;
            align-items: center;
            min-width: 0;
            margin: 0;
            color: var(--theme_text_alt);

            &::after {
                content: "/";
                margin-left: 5px;
                color: var(--theme_accent);
            }

            &:last-child {
                color: var(--theme_text);

                &::after {
                    display: none;
                }
            }
        }

        .page_breadcrumb_text {
            max-width: min(62vw, 420px);
            color: inherit;
            text-decoration: none;
            overflow-wrap: anywhere;
        }

        a.page_breadcrumb_text {
            color: var(--theme_border_btn);

            &:hover,
            &:focus {
                text-decoration: underline;
            }
        }
    }
}