.gr-scroll-lock {
  overflow: hidden !important;
}

:host {
  /**
   * @prop --line-height: Line height of the menu item
   *
   * @prop --background-color: Background color of the menu item
   * @prop --background-color-focused: Background color of the menu item when focused
   *
   * @prop --color: Text color of the menu item
   * @prop --color-focused: Text color of the menu item when focused
   * @prop --color-disabled: Text color of the menu item when disabled
   *
   * @prop --padding-top: Top padding of the menu item
   * @prop --padding-end: Right padding of the menu item (will be left padding when we support right-to-left direction)
   * @prop --padding-bottom: Bottom padding of the menu item
   * @prop --padding-start: Left padding of the menu item (will be right padding when we support right-to-left direction)
   *
   * @prop --transition: Transition of the menu item
   */
  --line-height: var(--gr-line-height-normal);
  --background-color: transparent;
  --background-color-focused: var(--gr-color-primary);
  --color: var(--gr-color-dark);
  --color-focused: var(--gr-color-primary-contrast);
  --color-disabled: var(--gr-color-medium);
  --padding-top: var(--gr-spacing-xx-small);
  --padding-start: var(--gr-spacing-x-large);
  --padding-end: var(--gr-spacing-x-large);
  --padding-bottom: var(--gr-spacing-xx-small);
  --transition: background-color 150ms linear, color 150ms linear;
  position: relative;
  display: flex;
  align-items: stretch;
  font-family: var(--gr-font-family);
  font-size: var(--gr-font-size-medium);
  font-weight: var(--gr-font-weight-normal);
  line-height: var(--line-height);
  letter-spacing: var(--gr-letter-spacing-normal);
  text-align: left;
  background-color: var(--background-color);
  color: var(--color);
  padding-top: var(--padding-top);
  padding-left: var(--padding-start);
  padding-right: var(--padding-end);
  padding-bottom: var(--padding-bottom);
  transition: var(--transition);
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host(.menu-item-focused:not(.menu-item-disabled)) {
  outline: none;
  background-color: var(--background-color-focused);
  color: var(--color-focused);
}

:host(.menu-item-disabled) {
  outline: none;
  color: var(--color-disabled);
  cursor: not-allowed;
}

.checkmark {
  display: flex;
  position: absolute;
  left: 0.5em;
  top: calc(50% - 0.5em);
  visibility: hidden;
  align-items: center;
  font-size: inherit;
}

.checkmark svg {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  contain: strict;
  fill: currentcolor;
  box-sizing: content-box !important;
}

:host(.menu-item-checked) .checkmark {
  visibility: visible;
}

.label {
  flex: 1 1 auto;
}

.start {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.start ::slotted(:last-child) {
  margin-right: 0.5em;
}

.end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.end ::slotted(:first-child) {
  margin-left: 0.5em;
}