// @file
// General typography styles.

@mixin styleguide-reset($type: all) {
  @if $type == all or $type == outer {
    /**
     * Default element styles
     */
    html {
      font: #{$font-size}/#{$line-height} $font-sansserif;
      color: $color-text;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility\9; /* Only IE, can mess with Android */
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }
  }

  @if $type == all or $type == text-block {
    /**
     * Block level elements
     */
    p,
    ul,
    ol,
    dl,
    table,
    form,
    fieldset,
    video,
    audio,
    figure {
      margin: $rhythm-space 0;
      padding: 0;
      font-size: ms(0);
      line-height: $line-height;
    }
  }

  @if $type == all or $type == headings {
    /**
     * Default header styles
     */
    #{headings(1, 2)} {
      @extend %font-sansserif-light;
    }

    #{headings(3, 4)} {
      @extend %font-sansserif-regular;
    }

    #{headings(5, 6)} {
      @extend %font-sansserif-bold;
    }

    $hcount: 6;
    @while $hcount > 0 {
      h#{7 - $hcount} {
        font-size: ms($hcount - 1);
        margin: ms(2 - $hcount) 0 ms(0 - $hcount);
      }

      $hcount: $hcount - 1;
    }

    #{headings()} {
      line-height: normal;
    }
  }

  @if $type == all or $type == lists {
    /**
     * Default list styles
     */
    ul,
    ol,
    dl {
      margin-left: $inset-space;

      ul,
      ol {
        margin-left: $inset-space-short;
      }
    }

    ol {
      list-style: decimal;
    }

    ul {
      list-style: disc;
    }

    li,
    dt,
    dd {
      margin: $rhythm-space-short 0;
    }

    dt {
      @extend %font-sansserif-bold;
    }

    dd {
      margin-left: $inset-space-short;
    }
  }

  @if $type == all or $type == quotes {
    /**
     * Default quote styles
     */
    q {}

    blockquote {
      margin: $rhythm-space $inset-space-short;
      padding: $rhythm-space;
      border-top: $base-border-width solid;
      border-bottom: $base-border-width solid;
      border-color: $color-border;
      @include border-radius;
      @extend %font-serif-italic;

      > * {
        font-size: 1.25em;

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @if $type == all or $type == preformatted {
    /**
     * Preformatted text styles
     */
    pre,
    code {
      @extend %font-monospace;
    }

    pre {
      margin: $rhythm-space $inset-space-short;
      padding: 0;
    }

    code {
      display: inline-block;
      padding: 0 $rhythm-space;
      @include border-radius;
      background: $color-text;
      color: $color-text-code;

      pre & {
        display: block;
        padding: $rhythm-space;
        overflow: auto;
      }
    }
  }

  @if $type == all or $type == tables {
    /**
     * Default table styles
     */
    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }

    caption,
    tfoot {
      @extend %font-serif-italic;
    }

    th {
      @extend %font-sansserif-regular;
      text-transform: uppercase;
      background: $color-background-alternate;
      text-align: left;
    }

    th,
    td {
      margin: 0;
      padding: $rhythm-space;
      border-top: $base-border-width solid $color-border;
      border-bottom: $base-border-width solid $color-border;
    }
  }

  @if $type == all or $type == forms {
    /**
     * Default form styles
     */
    label {
      display: inline-block;
      @extend %font-sansserif-bold;
      margin: $rhythm-space-short 0;

      &.required {
        color: $color-warning;
      }

      &.error {
        color: $color-error;
      }
    }

    fieldset {
      display: block;
      @include rhythm-borders;
      @include box-sizing(border-box);
      width: 100%;
      max-width: 100%;
      border: $base-border-width solid $color-border;

      > :first-child,
      > legend + * {
        margin-top: 0;
      }

      > :last-child {
        margin-bottom: 0;
      }
    }

    legend {
      padding: 0 $rhythm-space-short;
      @include border-radius;
      @extend %font-sansserif-regular;
    }

    button,
    input,
    textarea {
      display: inline-block;
      @include box-sizing(border-box);
      line-height: $line-height;
      @include single-transition((background, color, border, outline), .2s);
      outline: 0 solid $color-border-highlight;
      font-family: $font-sansserif;

      &:focus,
      &:active {
        outline-width: $base-border-width;
        @include box-shadow(none);
      }
    }

    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="file"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="range"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select,
    textarea {
      display: block;
      -webkit-appearance: none;
      @include box-sizing(border-box);
      margin: $rhythm-space-short 0;
      padding: $rhythm-space;
      max-width: 100%;
      border: $base-border-width solid $color-border;
      @include border-radius;
      font-size: 1em;
      background: $color-input-background;
      @include background-clip(padding-box);

      @include placeholder {
        color: $color-placeholder;
        font-family: $font-sansserif;
        font-weight: $font-regular;
      }

      &.required {
        color: $color-warning;
        border-color: $color-warning;
      }

      &.error {
        color: $color-error;
        border-color: $color-error;
      }

      &:focus,
      &:active {
        color: $color-text;
        @include box-shadow(none);
        background: $color-input-background;
        border-color: $color-border-highlight;
      }
    }

    textarea {
      display: block;
      width: 100%;
      height: auto;
    }

    input[type="color"] {
      &::-webkit-color-swatch-wrapper,
      &::-webkit-color-swatch {
        position: relative;
        top: -$rhythm-space-short;
        left: -$rhythm-space-short;
        width: $line-height * 2;
        height: $line-height;
        padding: 0;
      }
    }

    input[type="search"] {
      -webkit-appearance: textfield;

      &::-webkit-search-decoration {
        display: none;
      }
    }

    input[type="range"] {
      -webkit-appearance: slider-horizontal;
      color: $color-text;
      @include box-shadow(none);
    }

    // Tweaks for Safari + Chrome.
    @media (-webkit-min-device-pixel-ratio: 0) {
      select[size],
      select[multiple],
      select[multiple][size] {
        background-image: none;
        padding-right: 3px;
      }

      select,
      select[size="0"],
      select[size="1"] {
        @include border-radius;
        background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 20px;
      }

      ::-webkit-validation-bubble-message {
        @include box-shadow(none);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
        border: 1px solid;
        border-color: #747474 #5e5e5e #4f4f4f;
        color: white;
        overflow: hidden;
        padding: 15px 15px 17px;
        text-shadow: black 0 0 1px;
        height: 16px;
      }

      ::-webkit-validation-bubble-arrow,
      ::-webkit-validation-bubble-top-outer-arrow,
      ::-webkit-validation-bubble-top-inner-arrow {
        @include box-shadow(none);
        background: #666666;
        border: 0;
      }
    }
  }

  @if $type == all or $type == inline-text {
    /**
     * Default inline text styles
     */
    sub,
    sup,
    small {
      font-size: ms(-1);
    }

    sup {
      vertical-align: super;
    }

    sub {
      vertical-align: sub;
    }

    i,
    em {
      font-style: italic;
    }

    bold,
    strong {
      font-weight: $font-bold;
    }
  }

  @if $type == all or $type == links {
    /**
     * Default link styles
     */
    a {
      @include single-transition((background, color, border, outline), .2s);

      &,
      &:link {
        color: $color-link;
        text-decoration: none;
      }

      &:visited {
        color: $color-link-visited;
      }

      &:hover {
        color: $color-link-hover;
        text-decoration: underline;
      }
    }
  }

  @if $type == all or $type == media {
    /**
     * Default media styles
     */
    img,
    audio,
    video {
      display: block;
      margin: $rhythm-space auto;
      max-width: 100%;
      height: auto;
    }

    audio {
      min-height: $line-height;
    }
  }

  @if $type == all or $type == buttons {
    /**
     * Button styles
     */
    @include buttons;

    button,
    [type="reset"],
    [type="submit"],
    [type="button"],
    [class*="action-item"] {
      @extend %font-sansserif-bold;
      @extend %button-default-layout;
      @extend %button-default;
      max-width: 100%;

      &[class*="action-item-large"] {
        @include text-shadow(none);
        font-weight: $font-regular;
      }
    }

    [class*="action-item-small"] {
      @extend %button-small-layout;
    }

    [class*="action-item-large"] {
      @extend %button-large-layout;
    }

    .action-item-active,
    .action-item-small-active,
    .action-item-large-active {
      &,
      &[type="reset"],
      &[type="submit"],
      &[type="button"] {
        @extend %button-active;
      }
    }

    .action-item-primary,
    .action-item-small-primary,
    .action-item-large-primary {
      &,
      &[type="reset"],
      &[type="submit"],
      &[type="button"] {
        @extend %button-primary;
      }
    }

    .action-item-primary-active,
    .action-item-small-primary-active,
    .action-item-large-primary-active {
      &,
      &[type="reset"],
      &[type="submit"],
      &[type="button"] {
        @extend %button-primary-active;
      }
    }

    .action-item-alternate,
    .action-item-small-alternate,
    .action-item-large-alternate {
      &,
      &[type="reset"],
      &[type="submit"],
      &[type="button"] {
        @extend %button-alternate;
      }
    }

    .action-item-alternate-active,
    .action-item-small-alternate-active,
    .action-item-large-alternate-active {
      &,
      &[type="reset"],
      &[type="submit"],
      &[type="button"] {
        @extend %button-alternate-active;
      }
    }
  }

  @if $type == all or $type == messages {
    /**
     * Message styles
     */
    @include messages;

    [class*="message-"] {
      @extend %message;
    }

    .message-status {
      @extend %message-status;
    }

    .message-success {
      @extend %message-success;
    }

    .message-warning {
      @extend %message-warning;
    }

    .message-error {
      @extend %message-error;
    }
  }
}
