//==========================================================
// Base Tags
//==========================================================

html { box-sizing: border-box; }
*,
*::before,
*::after { box-sizing: inherit; }

body {
  font-family: $font-family-base;
  font-size: $font-size;
  line-height: $body-line-height;
  color: $text-color;
  background-color: $body-bg;
}

header {
  z-index: $z-index-header;
}

footer {
  z-index: $z-index-footer;
}

.footer {
  color: $footer-color;
  background-color: $footer-bg-color;

  a {
    @include set-link-state-color($footer-link-color, null, $footer-link-hover-color);
    @include transition(color $transition-duration $transition-timing-function);
  }

  .footer-copyright {
    padding: $space-2 0;
    color: $footer-copyright-color;
    text-align: center;
    background-color: $footer-copyright-bg-color;
  }
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-bottom: 1px solid $border-color;
}

// issue #1
img {
  height: auto;
  max-width: 100%;
}

// link
a {
  @include set-link-state-color($link-color, $link-color-visited, $link-color-hover);
  text-decoration: $link-decoration;

  &:hover,
  &:focus {
    text-decoration: $link-hover-decoration;
  }

  &.no-deco {
    @include no-decoration;
  }

  &.inherit {
    @include set-link-state-color(inherit);
  }
}

%no-decoration {
  @include no-decoration;
}

// blockquote
blockquote {
  padding: 0 1em;
  margin: 0;
  margin-top: 0;
  margin-bottom: 1em;
  color: $blockquote-color;
  border-left: .25em solid $blockquote-border-color;

  @each $name, $color in $color-set {
    &.#{$name} {
      color: $color;
      background-color: rgba($color, .2);
      border-color: $color;
    }
  }
}

//==========================================================
// Table
//==========================================================

// default
table {
  border: $table-border-width solid $table-border-color;
  border-collapse: collapse;

  th,
  td {
    padding: $table-cell-padding / 2;
    border: $table-border-width solid $table-border-color;
  }
}

.table {
  width: 100%;
  max-width: 800px;
  font-size: .9em;
  color: $table-text-color;
  border: 0;
  border-collapse: collapse;

  th,
  td {
    padding: $table-cell-padding;
    border: 0;
  }

  th {
    color: $table-head-text-color;
    text-align: left;
    background-color: $table-head-bg-color;
  }

  &.center {
    margin: 0 auto;
    text-align: initial; // want to fix align center in helper class. #86
  }

  &.bordered {
    border: $table-border-width solid $table-border-color;

    th,
    td {
      border: $table-border-width solid $table-border-color;
    }
  }

  &.striped {
    tr:nth-child(even) { background-color: $table-row-even-bg; }
  }

  &.hover {
    tr:hover {
      background-color: $table-row-hover-bg;
    }
  }
}

.table-responsive-wrapper {
  max-width: 100%;
  overflow-x: auto;

  table {
    width: auto;
    max-width: none;
  }
}

//==========================================================
// Scaffolding Optional Classes
//==========================================================

%pad {
  &.pad {
    padding: $space-2 $space-3;
  }

  &.pad-sm {
    padding: $space-1 $space-2;
  }

  &.pad-lg {
    padding: $space-4 $space-5;
  }
}

// .pad with container elements
div,
p,
blockquote {
  @extend %pad;
}

// .pad with section elements
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
aside,
article,
section {
  @extend %pad;

  @include media-breakpoint-up('md') {
    &.pad {
      padding: $space-2 4%;
    }

    &.pad-sm {
      padding: $space-1 2%;
    }

    &.pad-lg {
      padding: $space-4 6%;
    }
  }
}

// h1.accent
@include headings {
  &.accent {
    font-family: $font-family-accent;
  }
}

// icon
i.moss-icon {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;

  > svg {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}

//============================================================
// Scaffolding for vue.js
//============================================================

[v-cloak] { display: none !important; }