message: Update CSS to match mocks
diff: @@ -72,7 +72,12 @@ export class OutlineRegionPicker extends LitElement {
  .geo-name {
  color: var(--light-gray);
  font-size: 16px;
  - line-height: 19px;
  + }
  + .country-name {
  + color: var(--medium-gray);
  + font-size: 12px;
  + line-height: 24px;
  + text-transform: uppercase;
  }
  paper-button {
  background: var(--primary-green);
  @@ -81,9 +86,27 @@ export class OutlineRegionPicker extends LitElement {
  font-size: 14px;
  }
  .flag {
  - width: 86px;
  - height: 86px;
  - margin-bottom: 48px
  + width: 100%;
  + height: 100%;
  + }
  + .flag-overlay {
  + display: inline-block;
  + width: 100px;
  + height: 100px;
  + border: 4px solid rgba(255, 255, 255, 0.1);
  + border-radius: 50%; /* Make a circle */
  + position: relative; /* Ensure the gradient uses the correct origin point. */
  + margin-bottom: 12px;
  + }
  + .flag-overlay::after {
  + content: "";
  + position: absolute;
  + top: 0px;
  + left: 0px;
  + width: 100%;
  + height: 100%;
  + border-radius: inherit;
  + background: linear-gradient(to right, rgba(20, 20, 20, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  }
  .card-content {
  display: flex;
  @@ -96,7 +119,7 @@ export class OutlineRegionPicker extends LitElement {
  justify-content: flex-end;
  }
  label.city-button {
  - padding: 0 2px 24px 2px
  + padding: 0 8px 8px 8px;
  }
  iron-icon {
  color: var(--primary-green);
  @@ -123,9 +146,11 @@ export class OutlineRegionPicker extends LitElement {
  <div class="card-header">
  ${this.selectedIndex === index ? html`<iron-icon icon="check-circle"></iron-icon>` : ''}
  </div>
  + <div class="flag-overlay">
  <img class="flag" src="${this._flagImage(option)}">
  + </div>
  <div class="geo-name">${getShortName(option.cloudLocation, this.localize)}</div>
  - <div class="geo-name">${option.cloudLocation.location?.countryIsRedundant() ? '' :
  + <div class="country-name">${option.cloudLocation.location?.countryIsRedundant() ? '' :
  localizeCountry(option.cloudLocation.location, this.language)}</div>
  </label>`;
  })}
  