/* A short link to another page keeps its whole width on one line, the row's other content giving
   way, since a link cut short can't be read; at the size of the controls' text beside it. In a row
   of controls that sets their shared height, as a filter bar does, it takes that height with its
   text centered, so it lines up with a control's box rather than with its label. */
.page-link
{
    display: inline-flex;
    flex: none;
    align-items: center;
    height: var(--control-height, auto);
    font-size: 0.875rem;
    white-space: nowrap;

    /* It looks like a text button, its text staying the link's blue: on hover and keyboard focus
       a fill a step lighter than the surface shows behind it, reaching past the text through a
       spread shadow in the fill's color so the text doesn't move, as the site's text buttons do.
       Keyboard focus also gets the site's focus ring. */
    --page-link-hover-background-color: var(--neutral-high-emphasis-surface-color);
    --page-link-hover-background-reach: 0.2em;
    border-radius: 0.25rem;

    &:hover,
    &:focus-visible
    {
        background: var(--page-link-hover-background-color);
        box-shadow: 0 0 0 var(--page-link-hover-background-reach) var(--page-link-hover-background-color);
    }

    &:focus-visible
    {
        outline: 2px solid var(--primary-higher-emphasis-color);
        outline-offset: 0.3em;
    }
}

/* The arrow's room, an em wide, so the loading ring that takes its place once the link is followed
   moves nothing beside it. Both the arrow and the ring sit low in it, their middles about 0.2em
   under the capitals' middle in the site's font, so the room is lifted that far to center them on
   the text; measured in screenshots. */
.page-link-arrow
{
    position: relative;
    top: -0.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    vertical-align: middle;

    /* styles-other-component: the shared ring sits alone in the arrow's room, without the gap it
       keeps before a status's words. */
    .loading-ring
    {
        margin-right: 0;
    }
}

/* A link with nothing to open yet takes the site's dim for a control that can't be used, keeping
   its place so nothing beside it moves when it can be used. */
.page-link-disabled
{
    opacity: 0.5;
    cursor: default;

    &:hover
    {
        color: var(--LINK-COLOR);
        background: none;
        box-shadow: none;
    }
}