chromium/chrome/browser/resources/nearby_share/shared/nearby_device.html

<style>
  #wrapper {
    align-items: center;
    display: flex;
    border-radius: 8px;
    outline: none;
    padding-block-end: 3px;
    padding-block-start: 3px;
    padding-inline-end: 9px;
    padding-inline-start: 6px;
    cursor: pointer;
    margin: 3px;
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
  }

  :host {
    background-color: var(--cr-card-background-color);
    border: 1px solid var(--cros-button-stroke-color-secondary);
    border-bottom-style: hidden;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  /* TODO(b/279623883): Remove once Jelly is launched. */
  :host-context(body:not(.jelly-enabled)):host(:focus) {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--cros-focus-aura-color);
  }

  :host-context(body.jelly-enabled):host(:focus) {
    border: 2px solid var(--cros-sys-focus_ring);
  }

  :host-context(body.jelly-enabled):host(:hover) {
    background-color: var(--cros-sys-hover_on_subtle);
  }

  /* TODO(b/279623883): Remove once Jelly is launched. */
  :host-context(body:not(.jelly-enabled)):host([is-selected]) {
    border-color: var(--cros-button-icon-color-secondary);
  }

  :host-context(body.jelly-enabled):host([is-selected]) {
    background-color: var(--cros-sys-primary_container);
  }

  /* TODO(b/279623883): Remove once Jelly is launched. */
  :host-context(body:not(.jelly-enabled)):host([is-selected]) #name {
    color: var(--cros-text-color-prominent);
  }

  :host-context(body.jelly-enabled):host([is-selected]) #name {
    color: var(--cros-sys-primary);
  }

  :host-context(body.jelly-enabled):host([is-selected]) #share-target-image {
    border: 1px solid var(--cros-sys-primary);
  }

  :host([is-selected]) #checked {
    display: flex;
  }

  #checked {
    display: none;
    flex-shrink: 0;
    height: 20px;
    padding-top: 2px;
    vertical-align: middle;
    width: 20px;
    margin-left: auto;
    padding-left: 8px;
    padding-right: 8px;
  }

  :host-context(body.jelly-enabled) #checked {
    color: var(--cros-sys-primary);
  }

  /* TODO(b/279623883): Remove once Jelly is launched. */
  :host-context(body:not(.jelly-enabled)) #checked {
    color: var(--cros-icon-color-prominent);
  }

  #icon {
    --nearby-device-icon-size: 15px;
    flex-shrink: 0;
    height: var(--target-image-size);
    width: var(--target-image-size);
  }

  :host-context(body.jelly-enabled) #icon {
    --nearby-device-icon-color: var(--cros-sys-on_primary_container);
    --nearby-device-icon-background-color: var(--cros-sys-primary_container);
  }

  :host-context(body.jelly-enabled):host([is-selected]) #icon {
    --nearby-device-icon-color: var(--cros-sys-on_primary);
    --nearby-device-icon-background-color: var(--cros-sys-primary);
  }

  #share-target-image {
    border-radius: 50%;
    /* Hide the image until it's downloaded. */
    display: none;
    flex-shrink: 0;
    height: var(--target-image-size);
    width: var(--target-image-size);
  }

  :host-context(body.jelly-enabled) #share-target-image {
    /* Have a placeholder so that the image doesn't enlarge when focused. */
    border: 1px solid var(--cr-card-background-color);
  }

  #name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 8px;
  }

  /* TODO(b/279623883): Remove once Jelly is launched. */
  :host-context(body:not(.jelly-enabled)) #name {
    color: var(--cros-text-color-secondary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  :host-context(body.jelly-enabled) #name {
    color: var(--cros-sys-secondary);
    font: var(--cros-button-2-font);
  }
</style>

<div id="wrapper" title="[[shareTarget.name]]">
  <nearby-device-icon id="icon" share-target="[[shareTarget]]">
  </nearby-device-icon>
  <img is="cr-auto-img" id="share-target-image"
      auto-src="[[getTargetImageUrl_(shareTarget)]]">
  </img>
  <div id="name">[[shareTarget.name]]</div>
</div>
<iron-icon id="checked" icon="nearby-share:checked"></iron-icon>