chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">

<dom-module id="chooser-shared-css">
  <template>
    <style>
      :host {
        color: var(--google-grey-900);
        display: block;
        white-space: nowrap;
      }

      .option {
        -webkit-appearance: none;
        align-items: center;
        background: white;
        border: 1px solid transparent;
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(0, 36, 100, .3),
                    0 3px 6px 2px rgba(0, 36, 100, .15);
        box-sizing: border-box;
        display: inline-flex;
        flex-direction: column;
        font-family: inherit;
        height: 5.25rem;
        justify-content: center;
        outline: 0;
        position: relative;
        vertical-align: bottom;
        width: 6.5rem;
      }

      .option:not(:first-of-type) {
        margin-inline-start: 1.5rem;
      }

      .option.keyboard-focused:focus {
        outline: rgba(26, 115, 232, 0.4) solid 3px;
      }

      .option .option-name {
        flex-grow: 0;
        font-size: 0.875rem;
        line-height: 1.25rem;
        text-align: center;
        white-space: normal;
      }

      .option .option-icon {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 2rem;
        margin: auto;
        width: 2rem;
      }

      .option .option-icon-shadow {
        background-color: var(--google-grey-refresh-100);
        border-radius: 50%;
        display: flex;
        height: 3rem;
        margin-bottom: 0.25rem;
        width: 3rem;
      }

      .option iron-icon {
        --iron-icon-fill-color: white;
        background: lightgrey;
        border-radius: 50%;
        display: none;
        height: 0.75rem;
        margin: 0;
        position: absolute;
        right: 0.375rem;
        top: 0.375rem;
        width: 0.75rem;
      }

      .option.keyboard-focused:focus iron-icon[icon='cr:check'],
      .option:hover iron-icon[icon='cr:check'],
      .option[active] iron-icon[icon='cr:check'] {
        display: block;
      }

      .option[active] {
        border: 1px solid var(--google-blue-600);
        color: var(--google-blue-600);
        font-weight: 500;
      }

      .option[active] iron-icon[icon='cr:check'] {
        background: var(--google-blue-600);
      }

      .button-bar {
        display: flex;
        justify-content: space-between;
        margin-top: 4rem;
      }

      :host-context([dir=rtl]) iron-icon {
        transform: rotate(180deg);
      }

      iron-icon[icon='cr:chevron-right'] {
        height: 1.25rem;
        margin-inline-end: -0.625rem;
        margin-inline-start: 0.375rem;
        width: 1.25rem;
      }
    </style>
  </template>
</dom-module>