btn_02: Primary

// =====================================================================================
//
// btn_02
//  - 同種のコンポーネントを併用する場合は、取り込むか、新しいRootsにするなどしてください
//
// =====================================================================================

@use 'scss/global' as g;

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

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

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

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

// -------------------------------------------------------------------------------------
// 基本
// -------------------------------------------------------------------------------------
.btn_02 {
  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: linear-gradient(to right, #000 50%, #fff 50%);
  background-position: right bottom;
  background-size: 200% 100%;
  border: 1px solid #000;

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

    &:hover {
      color: #fff !important;
      background-position: left bottom;
    }
  }
}

// -------------------------------------------------------------------------------------
// CTA、決定、進むなどポジティブなボタン
// -------------------------------------------------------------------------------------
.btn_02-primary {
  color: #fff !important; // a:linkが有効なため
  background: linear-gradient(to right, #fff 50%, #000 50%);
  background-position: right bottom;
  background-size: 200% 100%;

  @include g.mq(pc) {
    &:hover {
      color: #000 !important;
    }
  }
}

// -------------------------------------------------------------------------------------
// 進む（右向き矢印アイコン）
// -------------------------------------------------------------------------------------
.btn_02-forward {
  text-indent: -11px;

  &::after {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 12px;
    height: 12px;
    content: '';
    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-size: 12px 12px;
    transform: translateY(-50%);
  }
}

// -------------------------------------------------------------------------------------
// 戻る（左向き矢印アイコン）
// -------------------------------------------------------------------------------------
.btn_02-back {
  text-indent: 11px;

  &::after {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 12px;
    height: 12px;
    content: '';
    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-size: 12px 12px;
    transform: translateY(-50%);
  }
}

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

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

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