@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import "font-awesome/font-awesome";
@import "normalize.scss";
@import "easings";


//== Variables
$content-width:720px;
$content-padding:30px;

$color-primary-dark:#455a64;
$color-primary:#607d8b;
$color-primary-light:#cfd8dc;
$color-accent:#29B6F6;
$color-text-primary:#212121;
$color-text-secondary:#727272;
$color-divider:#b6b6b6;
$color-bg:#fff;

$font-size:18px;
$font-sans-serif:"ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Hiragino Kaku Gothic ProN",Arial,Helvetica,"メイリオ",Meiryo,cursive;
$font-accent:"Roboto Slab",serif;


//== Mixins
@mixin font-accent() {
  font-family:$font-accent;
  font-weight:bold;
}

@mixin e($name) {
  @at-root &__#{$name} {
    @content;
  }
}

@mixin m($name) {
  @at-root &--#{$name} {
    @content;
  }
}

@mixin mq-small() {
  @media only screen and (max-width:#{$content-width + ($content-padding * 2)}) {
    @content;
  }
}

@mixin btn-theme-factory($color, $color-active, $color-text-active) {
  color:$color;
  background-color:transparent;
  border-color:$color;
  transform:scale(1, 1);
  &:hover {
    color:$color-text-active;
    background-color:$color-active;
    border-color:$color-active;
    transform:scale(.98, .98);
  }
  &:active {
    color:$color-text-active;
    background-color:$color-active;
    border-color:$color-active;
    transform:scale(.96, .96);
  }
}


//== Bases
body,
html {
  width:100%;
  height:100%;
  min-width:320px;
  background:$color-bg;
  color:$color-text-primary;
  font-size:$font-size;
  font-family:$font-sans-serif;
  line-height:1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @include font-accent;
  color:$color-text-primary;
  small {
    margin-left:1em;
    font-weight:normal;
    font-size:.6em;
  }
}

h1 {
  font-size:2.6rem;
}

h2 {
  font-size:2rem;
}

h3 {
  margin-top:1.5em;
  margin-bottom:.5em;
  font-size:1.6rem;
}

h4 {
  margin-top:.8em;
  margin-bottom:.3em;
  font-size:1.2rem;
}

code {
  display:inline-block;
  margin-right:.1em;
  margin-left:.1em;
  padding:.1em .3em;
  border-radius:3px;
  color:$color-text-primary;
  background-color:lighten($color-primary-light, 10%);
}

pre {
  code {
    display:block;
  }
}

a {
  color:$color-accent;
  text-decoration:none;
  transition:all .3s $ease-out-cubic;
  &:hover {
    color:darken($color-accent, 20%);
  }
}


::selection {
  background:$color-primary-dark;
}

::-moz-selection {
  background:$color-primary-dark;
}

::-webkit-scrollbar {
  width:14px;
  background:lighten($color-primary, 20%);
  &:horizontal {
    height:5px;
  }
}

::-webkit-scrollbar-track {
  border-radius:2px;
}

::-webkit-scrollbar-thumb {
  border-radius:2px;
  background:lighten($color-primary, 5%);
}

@include mq-small {
  body,
  html {
    font-size:ceil($font-size / 1.4);
  }
}


//== Components
.prettyprint {
  margin-right:0;
  margin-left:0;
  padding:1em;
  border-radius:6px;
  font-size:round($font-size / 1.2);
  @include mq-small {
    font-size:round($font-size / 1.4);
  }
}

.gh-ribbons {
  @include mq-small {
    img {
      width:120px;
      height:auto;
    }
  }
}

.clearfix {
  zoom:1;
  &:after {
    content:"";
    clear:both;
    display:block;
  }
}

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

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

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

.list-inline {
  font-size:0;
  padding-left:0;
  > li {
    display:inline-block;
    list-style:none;
    font-size:$font-size;
    & + li {
      margin-left:1em;
    }
  }
}

.btn {
  @include font-accent;
  display:inline-block;
  padding:.8em 2em;
  border-width:2px;
  border-style:solid;
  border-radius:6px;
  font-size:$font-size;
  font-weight:bold;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition:all .2s $ease-out-cubic;
  &:focus {
    outline:none;
  }
  @include m(default) {
  }
  @include m(primary) {
    @include btn-theme-factory($color-primary, $color-primary, #fff);
  }
  @include m(hero) {
    @include btn-theme-factory(#fff, $color-accent, #fff);
  }

  @include mq-small {
    font-size:ceil($font-size / 1.4);
  }
}

.container {
  @extend .clearfix;
  position:relative;
  width:$content-width;
  margin-right:auto;
  margin-left:auto;
  padding-right:$content-padding;
  padding-left:$content-padding;
  @include mq-small {
    width:auto;
    padding-right:$content-padding / 2;
    padding-left:$content-padding / 2;
    margin-right:10px;
    margin-left:10px;
  }
}

.hero {
  padding:60px 0 120px 0;
  background:$color-primary;
  color:#fff;
  word-wrap:break-word;
  h1 {
    margin-top:0;
    color:#fff;
  }
  @include mq-small {
    .container {
      padding-right:0;
      padding-left:0;
    }
  }
}

.shares {
  margin:20px 0;
  .fb_iframe_widget span {
    vertical-align:top !important;
  }
  > * {
    display:inline-block !important;
    vertical-align:top !important;
    margin-top:5px;
    margin-bottom:5px;
    & + * {
      margin-left:10px;
    }
  }
}

.footer {
  border-top:1px solid lighten($color-divider, 15%);
  background:lighten($color-divider, 25%);
  font-size:.7rem;
  text-align:center;
  padding:3em $content-padding;
}

.contents {
  margin-top:-60px;
  margin-bottom:90px;
  padding-top:$content-padding;
  padding-bottom:$content-padding;
  background:#fff;
  box-shadow:0 3px 3px rgba(0, 0, 0, .2);
  @include mq-small {
    padding-top:$content-padding / 2;
    padding-bottom:$content-padding / 2;
  }
}

.section {
  position:relative;
  margin-bottom:5em;
  color:$color-text-secondary;
  @include e(title) {
    margin-top:0;
    .fa {
      color:$color-text-secondary;
    }
  }
}

.show-code {
  position:relative;
  pre {
    overflow:hidden;
  }
  code {
    overflow:auto;
    border-width:0;
    -webkit-overflow-scrolling:touch;
  }
  @include e(copy) {
    @extend .btn;
    position:absolute;
    top:0;
    right:0;
    z-index:10;
    padding:5px 8px;
    font-size:12px;
    border-width:0;
    border-radius:0 6px 0 3px;
    background:lighten(#2d2d2d, 8%);
    color:#ccc;
    &:hover,
    &.zeroclipboard-is-hover {
      background:darken($color-accent, 10%);
      color:#fff;
    }
    &:active,
    &.zeroclipboard-is-active {
      background:darken($color-accent, 30%);
      color:#fff;
    }
  }
}

.form-group {
  @extend .clearfix;
  margin:1em 0;

  @include e(label) {
    display:block;
    margin:0 0 .5em 0;
    font-size:.7rem;
    cursor:pointer;
  }
  @include e(input) {
    width:100%;
    border-radius:2px;
    background:#fff;
    border:1px solid $color-divider;
    padding:.5em 1em;
    box-sizing:border-box;
    transition:all .3s $ease-out-cubic;
    &:focus {
      outline:none;
      border-color:$color-accent;
    }
  }
}

.pm-indicator {
  margin:10px 0;
  padding:1.5em 1em;
  background:#e4e4e4;
  border:1px solid #ccc;
  border-radius:2px;
  color:#2c3e50;
  font-size:12px;
  text-shadow:1px 1px 0 rgba(255, 255, 255, .8);
  text-align:center;
  transition:all .2s ease-in-out;
  &.very-weak,
  &.not-match {
    background-color:#ffc3cf;
    border-color:#be1d30;
  }
  &.weak {
    background-color:#ffe6e5;
    border-color:#ff787d;
  }
  &.average {
  }
  &.strong {
    background-color:#bceea6;
    border-color:#78bc42;
  }
  &.very-strong {
    background-color:#68c6d7;
    border-color:#4f85a7;
  }
}