// Generic html styles used accross the App
// component specific styling should go in the component scss file

@font-face {
  font-family: 'Metropolis';
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
  src: url('../../../static/font/metropolis/Metropolis-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Metropolis';
  font-weight: 600;
  font-style: normal;
  text-rendering: optimizeLegibility;
  src: url('../../../static/font/metropolis/Metropolis-SemiBold.woff2') format('woff2');
}

// @font-face {
//   font-family: 'Metropolis';
//   font-weight: 700;
//   font-style: normal;
//   text-rendering: optimizeLegibility;
//   src: url('../../../static/font/metropolis/Metropolis-SemiBold.woff2') format('woff2');
// }

@font-face {
  font-family: 'Metropolis';
  font-weight: 800;
  font-style: normal;
  text-rendering: optimizeLegibility;
  src: url('../../../static/font/metropolis/Metropolis-ExtraBold.woff2') format('woff2');
}

// TODO: use this
// @font-face {
//   font-family: 'Metropolis';
//   font-weight: normal;
//   font-style: italic;
//   text-rendering: optimizeLegibility;
//   src: url('../../../static/font/metropolis/Metropolis-MediumItalic.woff2') format('woff2');
// }
//
// @font-face {
//   font-family: 'Metropolis';
//   font-weight: lighter;
//   font-style: normal;
//   text-rendering: optimizeLegibility;
//   src: url('../../../static/font/metropolis/Metropolis-Light.woff2') format('woff2');
// }

html {
  height: 100%;
  font-size: var(--font-size);
}

body {
  color: var(--text-color);
  font-family: 'Metropolis', sans-serif;
  line-height: var(--font-line-height);
  height: 100%;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1.1em;
}

sup,
sub {
  vertical-align: baseline;
  position: relative;
}

sup {
  top: -0.4em;
}
sub {
  top: 0.4em;
}

code {
  font: 0.8em Consolas, 'Lucida Console', 'Source Sans', monospace;
  background-color: var(--color-bg-alt);
}

// Why is this needed?
button {
  font-family: inherit;
}

#window {
  height: 100%;
  overflow: hidden; // so the scrollbar will not extend into the header
}

#main-content {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  left: 0px;
  right: 0px;
  // don't use {bottom/top} here
  // they cause flashes of un-rendered content when scrolling
  margin-top: var(--header-height);
  padding-bottom: var(--header-height); // fix this scrollbar extends beyond screen
  background-color: var(--color-bg);
}

.main {
  padding: 0 $spacing-vertical * 2/3;
}

.main--no-padding {
  padding-left: 0;
  padding-right: 0;
}

.page__header {
  padding: $spacing-vertical * 2/3;
  padding-bottom: 0;
}

.page__title {
  font-weight: 800;
  font-size: 3em;
}

/* Custom text selection */
*::selection {
  background: var(--text-selection-bg);
  color: var(--text-selection-color);
}

.credit-amount--indicator {
  font-weight: 500;
  color: var(--color-money);
}

.credit-amount--fee {
  font-size: 0.9em;
  color: var(--color-meta-light);
}

.credit-amount--bold {
  font-weight: 700;
}

.hidden {
  display: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.truncated-text {
  //display: inline-block;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.busy-indicator {
  background: url('../../../static/img/busy.gif') no-repeat center center;
  display: inline-block;
  margin: -1em 0;
  min-width: 16px;
  min-height: 8px;
  vertical-align: middle;
  padding: 0 30px;
  &:last-child {
    padding-right: 2px;
  }
  &:first-child {
    padding-left: 2px;
  }
}

.help {
  font-size: 0.85em;
  color: var(--color-help);
}

.meta {
  font-size: 0.9em;
  color: var(--color-meta-light);
}

.empty {
  color: var(--color-meta-light);
  font-style: italic;
}

/*should be redone/moved*/
.file-list__header {
  .busy-indicator {
    float: left;
    margin-top: 12px;
  }
}

.sort-section {
  display: block;
  margin-bottom: $spacing-vertical * 2/3;

  text-align: right;
  line-height: 1;
  font-size: 0.85em;
  color: var(--color-help);
}

section.section-spaced {
  margin-bottom: $spacing-vertical;
}