/* Copyright 2016 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/**
 * @fileoverview
 * Common styles for Material Design settings.
 */

<dom-module id="settings-shared">
  <template>
    <style>
      :root {
        --settings-secondary: {
          color: var(--paper-grey-500);
          font-weight: 400;
        }
      }

      h2 {
        @apply(--layout-center);
        color: var(--paper-grey-500);
        display: flex;
        font-size: 100%;
        font-weight: 500;
        margin: 0;
        min-height: 40px;
      }

      iron-icon {
        color: var(--paper-grey-300);
      }

      iron-icon[icon=done] {
        color: var(--google-green-500);
      }

      paper-button {
        margin: 0;
        min-width: auto;
      }

      paper-button[toggles][active] {
        background-color: var(--paper-grey-300);
      }

      span ~ a {
        -webkit-margin-start: 4px;
      }

      [is='action-link'],
      [is='action-link']:active,
      [is='action-link']:hover,
      [is='action-link']:visited,
      paper-button.primary-button,
      paper-button.tertiary-button {
        color: var(--google-blue-700);
      }

      [is='action-link']:hover {
        /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we
         * shouldn't be showing much :hover stuff on Polymer pages. */
        text-decoration: none;
      }

      paper-button.primary-button {
        --paper-button: {
          font-weight: 500;
          text-align: start;
        };
        margin: 0 -0.57em;  /* Offsets default paper-button padding. */
      }

      paper-button.secondary-button {
        --paper-button: {
          color: var(--paper-grey-700);
          text-decoration: none;
          font-weight: 500;
        };
      }

      paper-button.tertiary-button {
        --paper-button: {
          font-weight: 400;
          text-decoration: none;
        };
      }

      paper-radio-button {
        --paper-radio-button-checked-color: var(--google-blue-500);
        --paper-radio-button-label-spacing: 18px;
        --paper-radio-button-unchecked-color: var(--paper-grey-500);
        -webkit-margin-start: 2px;
      }

      .text-elide {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .button-row {
        display: flex;
        margin-top: 25px;
      }

      .button-strip {
        text-align: end;
      }

      .list-frame {
        @apply(--layout-center);
        -webkit-padding-end: 20px;
        -webkit-padding-start: 48px;
        display: block;
        padding-bottom: 0;
        padding-top: 0;
      }

      .list-frame select {
        -webkit-margin-start: 4px;
      }

      .list-frame .secondary {
        @apply(--settings-secondary);
      }

      .list-item {
        @apply(--layout-center);
        display: flex;
        min-height: 40px;
        padding: 0;
      }

      /* This button has no ink ripple */
      .list-item.list-button {
        @apply(--layout-center);
        color: var(--google-blue-500);
        font-weight: 500;
      }

      .list-item iron-icon {
        @apply(--layout-center);
        height: 20px;
        width: 20px;
      }

      .list-item > .middle {
        flex: 1;
        margin: 8px 12px;
        overflow: hidden;
        white-space: nowrap;
      }

      .list-item > .start {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
      }

      .list-item > paper-icon-item {
        padding: 0;
      }

      /* This button has no ink ripple. */
      .list-item.list-button {
        @apply(--layout-center);
        color: rgb(66, 133, 244);
        font-weight: 500;
      }

      .settings-box {
        @apply(--layout-center);
        border-top: 1px solid var(--paper-grey-300);
        display: flex;
        min-height: 40px;
        padding: 0 20px;
      }

      .settings-box.first {
        border-top: none;
      }

      .settings-box.block {
        display: block;
      }

      .settings-box.two-line {
        min-height: 52px;
      }

      .settings-box iron-icon {
        @apply(--layout-center);
        height: 20px;
        width: 20px;
      }

      .settings-box .secondary {
        @apply(--settings-secondary);
      }

      .settings-box .middle {
        -webkit-margin-start: 16px;
        align-items: center;
        flex: auto;
      }

      .settings-box .start {
        align-items: center;
        flex: auto;
      }

      /* The secondary-action wraps a clickable sub-area of a .settings-box.
       * An example is the |sign out| button on the People settings.
       * Here is an example with and without a secondary action box:
       *
       *  +-------------------------------------------------------+
       *  | Main action area .settings-box    | .secondary-action |
       *  +-------------------------------------------------------+
       *  | Another setting-box without a secondary-action        |
       *  +-------------------------------------------------------+
       */
      .settings-box .secondary-action {
        -webkit-border-start: 1px solid var(--paper-grey-300);
        -webkit-padding-start: 20px;
      }

      .settings-box paper-item iron-icon {
        /* Same padding as paper-icon-button. */
        padding: 8px;
      }

      .vertical-list > div:first-of-type {
        border-top: none;
      }

      .vertical-list > div {
        border-top: 1px solid var(--paper-grey-300);
      }
    </style>
  </template>
</dom-module>