@mixin focus-visible($type:null) {
    &:focus-visible {
        outline: 0 none;
        outline-offset: 0;
        box-shadow: $type var(--focus-ring);
    }
}

@mixin doc-link() {
    color: var(--primary-color-default);
    font-weight: 500;
    transition: all .2s;
    border-radius: var(--border-radius);
    @include focus-visible();

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

@mixin mobile {
    @media (max-width: 900px) {
        @content;
    }
}