/* Used to detect in JavaScript if apps have loaded styles or not. */
:root {
  --reach-menu-button: 1;
}

[data-reach-menu] {
  position: relative;
}

[data-reach-menu-popover] {
  display: block;
  position: absolute;
}

[data-reach-menu-popover][hidden] {
  display: none;
}

[data-reach-menu-list],
[data-reach-menu-items] {
  display: block;
  white-space: nowrap;
  border: solid 1px hsla(0, 0%, 0%, 0.25);
  background: hsla(0, 100%, 100%, 0.99);
  outline: none;
  padding: 1rem 0;
  font-size: 85%;
}

[data-reach-menu-item] {
  display: block;
  user-select: none;
}

/*
 The dom structure of a MenuLink is reach-menu-item > a,
 so to target all items we can use `data-reach-menu-item`
*/
[data-reach-menu-item] {
  /*
    These are styled in one rule instead of something like a[data-reach-menu-item]
    and li[data-reach-menu-item] so that apps don't have to fight specificity and
    can style both li and a menu items with one rule,
    ie: `[data-selected] { background: red; }`.
    Otherwise they'd have to define two styles, one for a and one for li.
  */

  /* reach-menu-item */
  cursor: pointer;

  /* a */
  display: block;
  color: inherit;
  font: inherit;
  text-decoration: initial;

  /* both */
  padding: 5px 20px;
}

/* pseudo pseudo selector */
[data-reach-menu-item][data-selected] {
  background: hsl(211, 81%, 36%);
  color: white;
  outline: none;
}

[data-reach-menu-item][aria-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}