.page-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 10px var(--space-5);
    border: 1px solid currentColor;
    border-radius: 2px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.page-action:hover,
.page-action:focus-visible {
    background: currentColor;
    outline: none;
}

/* The label and glyph invert together on hover. */
.page-action:hover .page-action__icon,
.page-action:hover .page-action__label,
.page-action:focus-visible .page-action__icon,
.page-action:focus-visible .page-action__label {
    color: var(--color-bg);
}

.page-action__icon {
    display: inline-flex;
    flex: none;
}