.menu-item {
  --menu-item-background-color: var(--agnostic-menu-item-background-color, inherit);

  text-align: left;

  /* TODO -- can we compose some of this from the button styles? */
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-style: solid;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-size: inherit;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  background-color: var(--menu-item-background-color);
  display: block;
  min-width: 100%;
  white-space: nowrap;
  cursor: default;
}

.menu-item[disabled] {
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.menu-item:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

.menu-item:not(:first-of-type) {
  border-top: 0;
}

.menu-item-selected {
  color: var(--agnostic-light);
  background-color: var(--agnostic-primary);
  border-color: var(--agnostic-primary);
}

.menu-item:active:not(.menu-item-selected) {
  color: var(--agnostic-primary);
}

.menu-item [aria-checked="true"]::before {
  /* TODO make this more flexible eventually */
  content: "\2713\0020";
}

/* Sizes */
.menu-item-large {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 2rem;
}

.menu-item-small {
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 1rem;
}

.menu-item-rounded:first-of-type {
  border-top-left-radius: var(--agnostic-radius);
  border-top-right-radius: var(--agnostic-radius);
}

.menu-item-rounded:last-of-type {
  border-bottom-left-radius: var(--agnostic-radius);
  border-bottom-right-radius: var(--agnostic-radius);
}

.menu-item:hover:not([disabled]):not(.menu-item-selected) {
  background-color: var(--agnostic-gray-extra-light);
  cursor: pointer;
}
