:root {
    --links-color: var(--digital-blue-60);
}

a {
    color: var(--color);
    text-decoration: none;
    cursor: pointer;

    &.disabled {
        cursor: default;
        pointer-events: none;
    }
}

.link {
    --color: var(--links-color);
    --fill: var(--links-color);
    --stroke: var(--links-color);

    color: var(--color);
    text-decoration: none;
    cursor: pointer;

    &.disabled {
        --color: var(--grey-60);
        --fill: var(--grey-60);
        --stroke: var(--grey-60);

        cursor: default;
        pointer-events: none;
    }

    &:focus {
        @include focus-outline(5px);
    }

    &:hover {
        --color: var(--digital-blue-80);
        --fill: var(--digital-blue-80);
        --stroke: var(--digital-blue-80);

        text-decoration: underline;
    }

    &:active {
        --color: var(--digital-blue-100);
        --fill: var(--digital-blue-100);
        --stroke: var(--digital-blue-100);

        text-decoration: underline;
    }

    &:visited {
        --color: var(--links-color);
        --fill: var(--links-color);
        --stroke: var(--links-color);

        text-decoration: underline;
    }
}

// override the style of the focus for links in Firefox
@supports (-moz-appearance: none) {
    .link:focus {
        outline-style: solid;
    }
}