chromium/chrome/browser/resources/ash/settings/os_settings_menu/menu_item.html

<style include="settings-shared">
  :host {
    /* The tap target extends slightly above each visible menu item. */
    --tap-target-padding: 3px;

    align-items: center;
    background: transparent;
    /* Always apply border so item doesn't shift when focused. */
    border-color: transparent;
    border-style: solid;
    border-width: var(--settings-menu-item-border-width);
    color: var(--cros-text-color-primary);
    display: flex;
    flex-direction: row;
    font: var(--cros-button-1-font);
    text-decoration: none;
  }

  :host-context(body:not(.revamp-wayfinding-enabled)):host {
    /* No border or border radius on window edge (left in LTR, right in RTL). */
    border-end-end-radius: 20px;
    border-start-end-radius: 20px;
    border-inline-start-width: 0;
    min-height: 32px;
    padding: var(--tap-target-padding) 0;
    padding-inline-start: 20px;
  }

  :host-context(body.revamp-wayfinding-enabled):host {
    border-radius: 16px;
    box-sizing: border-box;
    height: 60px;
    /* Consider border width for padding */
    padding-inline-start: calc(12px - var(--settings-menu-item-border-width));
    padding-inline-end: calc(12px - var(--settings-menu-item-border-width));
    width: var(--settings-menu-item-width);
  }

  /* Label & sublabel styles */
  #labelWrapper {
    /* Expand to fill remaining space */
    flex-grow: 1;
    max-width: 200px;
  }

  #label,
  #sublabel {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #sublabel {
    color: var(--cros-sys-on_surface_variant);
    font: var(--cros-body-2-font);
  }

  paper-tooltip {
    --paper-tooltip-min-width: max-content;
  }

  /* Default icon styles */
  iron-icon {
    pointer-events: none;
  }

  :host-context(body:not(.revamp-wayfinding-enabled)) iron-icon {
    margin-inline-end: 16px;
  }

  :host-context(body.revamp-wayfinding-enabled) iron-icon {
    margin-inline-end: 12px;
  }

  :host-context(body.revamp-wayfinding-enabled):host(:not(.iron-selected))
      iron-icon {
    --iron-icon-fill-color: var(--cros-sys-primary);
  }

  /* Hover state */
  :host(:not(.iron-selected):hover) {
    background-color: var(--cros-sys-hover_on_subtle) !important;
  }

  /* Focused state */
  :host-context(.focus-outline-visible):host(:focus) {
    border-color: var(--cros-focus-ring-color);
  }

  /* Selected state */
  :host(.iron-selected) {
    background-color: var(--cros-sys-primary) !important;
    color: var(--cros-sys-on_primary);
  }

  :host(.iron-selected) > iron-icon {
    --iron-icon-fill-color: var(--cros-sys-on_primary);
  }

  :host(.iron-selected) #sublabel {
    color: var(--cros-sys-surface_variant);
  }
</style>

<iron-icon icon="[[icon]]" hidden="[[!icon]]"></iron-icon>
<div id="labelWrapper">
  <div id="label">[[label]]</div>
  <div id="sublabel">[[sublabel]]</div>
</div>
<paper-tooltip
    position="[[tooltipPosition]]"
    offset="4"
    fit-to-visible-bounds
    animation-delay="1000"
    aria-hidden="true">
  [[label]]
</paper-tooltip>