@import "shared/mixins-and-vars";

[role="link"] {
    color: #00f;
    text-decoration: underline;
    cursor: pointer;

    .enable__is-dark-mode & {
        color: #9999ff; 
    }
}

a[target="_blank"] {
    color: #00f;

    .enable__is-dark-mode & {
        color: #92f1ff
    }
    &:visited {
        color: #99ff99;
    }

    .new-window-icon {
        height: (12 / @px);

        .enable__is-dark-mode & {
            filter: invert(100%) hue-rotate(162deg);
        }
    }
}

nav.breadcrumb {
    padding: 0.8em 1em;
    border: 1px solid hsl(0deg 0% 90%);
    border-radius: 4px;
    background: hsl(300deg 14% 97%);

    .enable__is-dark-mode & {
        background: hsl(300deg 14% 19%);
    }

    & ol {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    & li {
        display: inline;
    }

    & li + li::before {
        display: inline-block;
        margin: 0 0.25em;
        transform: rotate(15deg);
        border-right: 0.1em solid currentColor;
        height: 0.8em;
        content: "";
    }

    & [aria-current="page"] {
        color: #000;
        font-weight: 700;
        text-decoration: none;

        .enable__is-dark-mode & {
            color: @dark-mode-white;
        }
    }
}