/**
 * @license
 * Copyright 2020 CollabNet, Inc. All rights reserved.
 * http://www.collab.net
 */

/* Definitions and colors are compatible with native Gerrit app-theme.
  Variables are defined in
  https://gerrit.googlesource.com/gerrit/+/refs/heads/stable-${major}.${minor}/polygerrit-ui/app/styles/themes/app-theme.js
  file where ${major} and ${minor} stand for major and minor bits from
  Gerrit version e.g. for 3.2.3-58-gac3e1914fe it would be 3 and 2
  correspondingly. Note that [light|dark]-theme.html modifies the same
  variables so that changes are also applied to the login screen.*/
html {
  /* text colors */
  --primary-text-color: #e8eaed;
  --default-button-text-color: #8ab4f8;

  /* background colors */
  --background-color-primary: #ffffff;
  --background-color-secondary: #f8f9fa;
  --background-color-tertiary: #f1f3f4;
  --default-button-background-color: var(--background-color-primary);

  /* misc colors */
  --border-color: #e8e8e8;

  /* fonts */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --header-font-family: var(--font-family);
  --font-size-small: 0.857rem; /* 12px */
  --font-size-normal: 1rem; /* 14px */
  --font-size-h2: 1.532rem; /* 20px */
  --line-height-small: 1.143rem; /* 16px */
  --line-height-normal: 1.429rem; /* 20px */
  --font-weight-normal: 400; /* 400 is the same as 'normal' */

  /* spacing */
  --spacing-s: 4px;
  --spacing-m: 8px;
  --spacing-l: 12px;
  --spacing-xxl: 24px;

  /* header and footer */
  --footer-background-color: transparent;
  --footer-border-top: none;
  --header-background-color: var(--background-color-tertiary);
  --header-border-bottom: 1px solid var(--border-color);
  --header-border-image: '';
  --header-box-shadow: none;
  --header-padding: var(--spacing-l) var(--spacing-l);
  --header-icon-size: 0em;
  --header-icon: none;
  --header-text-color: black;
  --header-title-font-size: var(--font-size-h2);
  --header-height: 47px;

  /* misc */
  --border-radius: 4px;
  --shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

html,
body,
button,
div,
span,
h1,
table,
tr,
th,
td,
login-header,
login-footer {
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

input {
  background-color: var(--background-color-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  color: var(--primary-text-color);
  margin: 0;
  padding: var(--spacing-s);
  font: inherit;
}

td {
  padding-left: var(--spacing-m);
}

th {
  text-align: end;
}

input[type='submit'] {
  background-color: var(
    --button-background-color,
    var(--default-button-background-color)
  );
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  color: var(--default-button-text-color);
  text-transform: uppercase;
}

input[elevation='1'] {
  box-shadow: var(--shadow-elevation-2dp);
}

login-header {
  background: var(--header-background, var(--header-background-color, #eee));
  font-family: var(--header-font-family);
}

login-footer {
  background: var(--footer-background, var(--footer-background-color, #eee));
  border-top: var(--footer-border-top);
  border-bottom: var(--footer-border-top);
  display: block;
  height: 50px;
}

.header {
  background: inherit;
  border-bottom: var(--header-border-bottom);
  border-image: var(--header-border-image);
  border-right: 0;
  border-left: 0;
  border-top: 0;
  box-shadow: var(--header-box-shadow);
  height: var(--header-height);
  line-height: var(--line-height-small);
  padding: var(--header-padding);
  text-align: left;
}

.bigTitle {
  color: var(--header-text-color);
  font-size: var(--header-title-font-size);
  text-decoration: none;
}

.loginBody {
  background: var(--background-color-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-normal);
  padding: var(--spacing-l) var(--spacing-l);
  padding-bottom: var(--spacing-xxl);
}