//compassとscssを使った便利なuiパーツの紹介

// 【１】css3を使ったボタン
// 引数に色名(cssで指定出来る形式ならなんでもOK)を入れると、その色をベースカラーとしたボタンが一瞬で作れます。

.btn-3d {
  @include css3-button(blue);
}

@mixin css3-button($base-color) {
  /* IE8以下対策でベースカラーを背景色に指定 */
  background: $base-color;
  /* 角丸を3px指定(compassのincludeでブラウザ間の差異を吸収) */
  @include border-radius(3px);
  /* box-shadowを指定(compassのincludeでブラウザ間の差異を吸収) */
  @include box-shadow
    (0px 1px 3px rgba(000,000,000,0.3),
    inset 0px 0px 1px rgba(255,255,255,0.5));
  /* text-shadowを指定(compassのincludeでブラウザ間の差異を吸収) */
  @include text-shadow
    (0px -1px 0px rgba(000,000,000,0.7),
    0px 1px 0px rgba(255,255,255,0.3));
  /* 背景色を指定(compassのincludeでブラウザ間の差異を吸収) */
  @include background-image(
    linear-gradient(
      /* グラデーション開始色・・・ベースカラーに白(#fff)を50%混合 */
      mix($base-color, #fff, 50%),
      /* 50%の位置まで徐々にベースカラーになる */
      $base-color 50%,
      /* 50%の位置でベースカラーに黒(#000)を60%混合したカラーでグラデーション開始 */
      mix($base-color, #000, 60%) 50%,
      /* ベースカラーと白(#fff)80%の割合で混合した色まで変化 */
      mix($base-color, #fff, 80%)
    )
  );
  /* ベースカラーに黒を8:2の割合で混合した色でborder(枠線)をつける */
  border: 1px solid mix($base-color, #000, 80%);
  color: white;
  display: block;
  padding: 6px 10px;
  text-decoration: none;

  &:hover {
    /* box-shadowのinsetを明るく大きくし、rolloverを表現 */
    @include box-shadow
      (0px 1px 3px rgba(000,000,000,0.3),
      inset 0px 0px 15px rgba(255,255,255,0.6));
    /* ベースカラーでborder(枠線)をつける */
    border: 1px solid $base-color;
  }
}

//compassとscssを使った便利なuiパーツの紹介

// 【2】袋文字テキスト

.text-outline-character {
  @include text-outline-character(blue, white);
}

@mixin text-outline-character($text-color, $outline-color) {
  @include text-shadow(
    $outline-color -1px -1px 0px,
    $outline-color 1px -1px 0px,
    $outline-color 1px 1px 0px,
    $outline-color -1px 1px 0px,
    rgba(0, 0, 0, 0.8) 1px 2px 3px);
  color: $text-color;
}