// =====================================================================================
//
// btn_01
//  - デフォルトで設定済みです
//  - 同種のコンポーネントを併用する場合は、取り込むか、新しいRootsにするなどしてください
//
// =====================================================================================

@use 'scss/global' as g;

// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------

// ホバー時アニメーションの継続時間
$hover_duration: 0.3s;

// ホバー時アニメーションのイージング
$hover_easing: g.$ease_out_cubic;

// 進む/戻るのアイコン色（基本） ※Hexのみ。rgba()などは非対応
$color_icon: #000;

// 進む/戻るのアイコン色（CTA、決定、進むなどポジティブなボタン） ※Hexのみ。rgba()などは非対応
$color_icon_primary: #fff;

// -------------------------------------------------------------------------------------
// 基本
// -------------------------------------------------------------------------------------
.btn_01 {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 240px;
  padding: 24px 32px;
  font-size: g.$font_size_base;
  line-height: 1;
  color: #000 !important; // a:linkが有効なため
  text-align: center;
  vertical-align: baseline;
  cursor: pointer;
  background: #fff;
  border: 1px solid #000;

  @include g.mq(pc) {
    transition: background-color $hover_duration $hover_easing;

    &:hover {
      background-color: #f1f1f1;
    }
  }
}

// -------------------------------------------------------------------------------------
// CTA、決定、進むなどポジティブなボタン
// -------------------------------------------------------------------------------------
.btn_01-primary {
  color: #fff !important; // a:linkが有効なため
  background: #000;
  border: 1px solid #000;

  @include g.mq(pc) {
    transition: background-color $hover_duration $hover_easing,
      border-color $hover_duration $hover_easing;

    &:hover {
      background-color: #666;
      border-color: #666;
    }
  }
}

// -------------------------------------------------------------------------------------
// 進む（右向き矢印アイコン）
// -------------------------------------------------------------------------------------
.btn_01-forward {
  text-indent: -11px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23#{str-slice(#{$color_icon}, 2)}" d="M2.8,10.9L7.8,6L2.8,1.1l0.7-0.7L9.2,6l-5.7,5.7L2.8,10.9z" /></svg>');
  background-repeat: no-repeat;
  background-position: right 16px top 50%;
  background-size: 12px 12px;

  &.btn_01-primary {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23#{str-slice(#{$color_icon_primary}, 2)}" d="M2.8,10.9L7.8,6L2.8,1.1l0.7-0.7L9.2,6l-5.7,5.7L2.8,10.9z" /></svg>');
  }
}

// -------------------------------------------------------------------------------------
// 戻る（左向き矢印アイコン）
// -------------------------------------------------------------------------------------
.btn_01-back {
  text-indent: 11px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23#{str-slice(#{$color_icon}, 2)}" d="M8.5,11.7L2.8,6l5.7-5.7l0.7,0.7L4.2,6l4.9,4.9L8.5,11.7z" /></svg>');
  background-repeat: no-repeat;
  background-position: left 16px top 50%;
  background-size: 12px 12px;

  &.btn_01-primary {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23#{str-slice(#{$color_icon_primary}, 2)}" d="M8.5,11.7L2.8,6l5.7-5.7l0.7,0.7L4.2,6l4.9,4.9L8.5,11.7z" /></svg>');
  }
}

// -------------------------------------------------------------------------------------
// 幅を中身に合わせて可変
// -------------------------------------------------------------------------------------
.btn_01-auto {
  width: auto;
  max-width: none;
}

// -------------------------------------------------------------------------------------
// 幅を100%のブロックに
// -------------------------------------------------------------------------------------
.btn_01-block {
  display: block;
  max-width: none;
}

// -------------------------------------------------------------------------------------
// サイズ小
// -------------------------------------------------------------------------------------
.btn_01-s {
  max-width: 160px;
  padding: 16px 24px;
  font-size: g.$font_size_s;
}