/* Links
   ========================================================================== */

/**
 * 1. Specify link colour.
 * 2. Remove default underline style from non-hover state links.
 * 3. Interrupt the decoration line to let the shape of the text show through
 *    in supported browsers.
 * 4. Hide `.busy` class links when processing AJAX.
 */

a {
    color: $color-link; /* 1 */
    text-decoration: none; /* 2 */
    text-decoration-skip-ink: auto; /* 3 */

    &:hover,
    &:active {
        color: $color-link-hover;
        text-decoration: underline;
    }

    &:focus {
        outline: thin solid $color-link-focus;
    }

    &.busy {
        visibility: hidden; /* 4 */
    }
}

@include dark-mode {
    a {
        color: $dark-color-link;

        &:hover,
        &:active {
            color: $dark-color-link-hover;
        }

        &:focus {
            outline: thin solid $dark-color-link-focus;
        }
    }
}

/**
 * Additional styling for popup help links.
 *
 * Example HTML:
 *
 * <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a>
 */

.pophelp,
.pophelpsubtle {
    display: inline-block;
}

/**
 * Additional styling for popup help links in table headers.
 */

.txp-list thead th a.pophelp {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/**
 * Reduce risk of render glitches in links on RTL languages.
 */

[dir="rtl"] a {
    unicode-bidi: embed;
}

/**
 * Visually hide unfocussed/inactive ‘skip links’.
 *
 * Example HTML:
 *
 * <a class="txp-skip-link">
 */

.txp-skip-link {
    position: absolute;
    z-index: 1001;
    top: 0;
    left: 0;
    padding: 0.25em 0.5em;
    transform: translateY(-5em);
    transition: transform 0.2s ease-in-out;
    background-color: $color-background-box;

    &:focus,
    &:active {
        transform: translateY(0);
    }
}

@include dark-mode {
    .txp-skip-link {
        background-color: $dark-color-background-box;
    }
}

[dir="rtl"] .txp-skip-link {
    right: 1px;
    left: auto;
}