@import "global";

html
{
  height: 100%;
  font-size: var(--font-size);
}
body
{
  color: var(--text-color);
  font-family: 'Source Sans Pro', sans-serif;
  line-height: var(--font-line-height);
}

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

#window
{
  min-height: 100vh;
  background: var(--window-bg);
}

.badge
{
  background: var(--color-money);
  display: inline-block;
  padding: 2px;
  color: white;
  border-radius: 2px;
}
.credit-amount--indicator
{
  font-weight: bold;
  color: var(--color-money);
}

#main-content
{
  padding: $spacing-vertical;
  margin-top: var(--header-height);
  display: flex;
  flex-direction: column;
  main {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  main.main--single-column
  {
    width: $width-page-constrained;
  }
}
main.main--refreshing {
  &:before {
    $width: 30px;
    position: absolute;
    background: url('../img/busy.gif') no-repeat center center;
    width: $width;
    height: $spacing-vertical;
    content: "";
    left: 50%;
    margin-left: -1 / 2 * $width;
    display: inline-block;
  }
}

.icon-fixed-width {
  /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
  width: (18em / 14);
  text-align: center;
}

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);
}

p
{
  margin-bottom: 0.8em;
  &:last-child
  {
    margin-bottom: 0;
  }
}

.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('../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;
  }
}

/*should this be here or work this way? had to hack additional rule below*/
.icon:only-child {
  position: relative;
  top: 0.16em;
}
.icon-featured > .icon {
  top: 0;
}

.help {
  font-size: .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;
}

.text-center
{
  text-align: center;
}