Hover, Focus, Disabled

An element can be in a state: the mouse is over it, it has the keyboard focus, it is disabled. A pseudo-class after a selector picks the element only while it is in that state: a:hover is a link with the mouse over it, button:focus-visible is a button that got the focus from the keyboard (Tab), and button:disabled is a button with the disabled attribute.

A pseudo-class counts like a class, so a:hover beats nav a, which is only two tags. For example, a card whose border darkens while the mouse is over it:

.card:hover {
  border-color: #999;
}

Visitors who use the keyboard move with Tab and press with Enter; the focus ring shows them where they are, so never remove the outline without a replacement. And the disabled attribute in the HTML is what stops clicks: your rule only shows it.

The check asks for the style of the Notebook's disabled Buy button, of the Cart link with the mouse over it, and of the Mug's Buy button with the keyboard focus on it. It must print:

> the style of #notebook .buy (1 element, window 1024 px wide)
  button.buy "Buy"
    opacity: 0.5   <- button:disabled
    cursor: not-allowed   <- button:disabled
> the style of the link "Cart" with the mouse over it (window 1024 px wide)
  a "Cart"
    text-decoration: underline   <- a:hover
> the style of the Buy button in "Mug" with the keyboard focus on it (window 1024 px wide)
  button.buy "Buy"
    outline: 3px solid #06c   <- button:focus-visible
    outline-offset: 2px   <- button:focus-visible

Your task: above the @media block, write three rules: a:hover with text-decoration: underline; button:focus-visible with outline: 3px solid var(--brand) and outline-offset: 2px; button:disabled with opacity: 0.5 and cursor: not-allowed.

Assignment
Follow the Coding Tutorial to style three states: a link under the mouse, a button with the keyboard focus, and a disabled button.

Hint
A pseudo-class sticks to its selector with a colon and no space: a:hover, not a :hover.