import { html } from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import './shared_vars.css.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
const styleMod = document.createElement('dom-module');
styleMod.appendChild(html `
  <template>
    <style>

.card {
  background-color: var(--cr-card-background-color);
  border-radius: var(--cr-card-border-radius);
  box-shadow: var(--cr-card-shadow);
  overflow: hidden;
}

/* This selector relies on the fact that pseudo-classes :hover and :active have
 * lower priority than attribute selector. */
cr-link-row[non-clickable] {
  background-color: var(--cr-card-background-color);
  cursor: default;
}

.page-title {
  font-weight: 400;
}

.label {
  min-height: 20px;
}

.single-line-label {
  min-height: var(--section-min-height);
}

.flex-centered {
  align-items: center;
  display: flex;
}

.elide-left {
  /* The following non-flex directives allow eliding long originUrls from
  * the left. Forcing rtl should not cause an issue for right-to-left
  * languages in this case, since valid URL characters are restricted to
  * ASCII.
  */
  direction: rtl;
}

.elide-left > a {
  direction: ltr;
  /* This styling is necessary to fix the display of domains starting with
   * numbers.
   */
  unicode-bidi: bidi-override;
}

.dialog-title {
  color: var(--cr-primary-text-color);
  font-size: 15px;
  font-weight: normal;
  line-height: 22px;
  margin: 0;
  padding-block-end: 16px;
  padding-block-start: 16px;
}

.settings-cr-link-row {
  --cr-icon-button-margin-start: 0px;
}

.site-link {
  color: var(--cr-primary-text-color);
  display: block;
  height: auto;
  line-height: 154%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

input.password-input,
cr-input.password-input::part(input) {
  /* Since passwords are displayed with an input element, this is
   * necessary to prevent Chrome from using the operating system's font
   * instead of the Material Design font. */

  font-family: 'DejaVu Sans Mono', monospace;



}

.input-field {
  margin-inline-end: 34px;
  --cr-input-padding-start: 20px;
  --cr-input-min-height: 40px;
  --cr-input-error-display: none;
  --cr-input-border-radius: 10px;
  --cr-icon-button-margin-start: 0;
  --cr-icon-button-margin-end: 0;
}

.cr-row-action-button {
  height: auto;
  margin-inline-start: 16px;
}

.back-button {
  --cr-icon-button-margin-end: 6px;
  --cr-icon-button-margin-start: 0px;
}
    </style>
  </template>
`.content);
styleMod.register('shared-style');
