chromium/chrome/browser/resources/ash/settings/device_page/keyboard_remap_modifier_key_row.html

<style include="settings-shared input-device-settings-shared">
  #header {
    display: flex;
  }

  :host([key-state='default-remapping']) .key-container {
    background-color: var(--cros-bg-color-dropped-elevation-1);
    border: none;
    box-shadow: 0 1px 1px var(--cros-bg-color-dropped-elevation-1);
  }

  :host([key-state='modifier-remapped']) .key-container {
    background-color: var(--cros-sys-highlight_shape);
    border: none;
    box-shadow: 0 1px 1px var(--cros-sys-highlight_shape);
  }

  .settings-box {
    justify-content: space-between;
    padding-inline-start: 0;
  }

  iron-icon {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    align-self: center;
    justify-self: center;
  }

  :host([remove-top-border]) .settings-box {
    border-top: none;
  }
</style>
<div class="settings-box">
  <div>
    <div id="keyLabelContainer" class="start key-container">
      <template is="dom-if" if="[[!keyIcon]]" restamp>
        <div id="keyLabel"
            aria-hidden="true">[[keyLabel]]</div>
      </template>
      <template is="dom-if" if="[[keyIcon]]" restamp>
        <iron-icon icon="[[keyIcon]]"></iron-icon>
      </template>
    </div>
  </div>
  <settings-dropdown-menu id="keyDropdown"
      label="[[keyLabel]]"
      pref="{{pref}}"
      menu-options="[[keyMapTargets]]">
  </settings-dropdown-menu>
</div>