// =====================================================================================
//
// form_01
//  - デフォルトで設定済みです
//  - ほかのコンポーネントで使用する場合は、本コンポーネントが後にならないよう読み込み順に注意してください
//  - 同種のコンポーネントを併用する場合は、取り込むか、新しいRootsにするなどしてください
//
// =====================================================================================

@use 'scss/global' as g;

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

// 各パーツの罫線色
$border_color: #ccc;

// 各パーツの背景色
$bg_color: #fff;

// 各パーツのアイコン色 ※Hexのみ。rgba()などは非対応
$icon_color: #000;

// アニメーションの継続時間
$duration: 0.15s;

// アニメーションのイージング
$easing: g.$ease_out_cubic;

// :focusや:active時の変化へのアニメーション
$transition: background-color $duration $easing, box-shadow $duration $easing,
  border $duration $easing;

// :checked時の背景色
$checked_bg_color: #fff;

// :checked時の罫線色
$checked_border_color: #ccc;

// :focus時の罫線色
$focus_border_color: #999;

// :focus時のシャドウ色
$focus_shadow_color: #e1e1e1;

// :active時の罫線色
$active_border_color: #999;

// :disabled時の背景色
$disabled_bg_color: #ddd;

// :disabled時のテキスト色
$disabled_text_color: g.$color_text_base;

// :disabled時の不透明度
$disabled_opacity: 0.5;

// Fractal表示かどうか（0=NO / 1=YES）
// 値は呼び出し側で書き換えるので本ファイルにおいて変更する必要無し
$fractal_mode: 0 !default;

// $fractal_modeが1の場合、同種のパーツ同士が影響しないよう固有の要素でラップする
@mixin wrap() {
  @if $fractal_mode == 1 {
    .dev_form_01 {
      @content;
    }
  } @else {
    @content;
  }
}

@include wrap() {
  // -------------------------------------------------------------------------------------
  // :focus時のスタイル
  // -------------------------------------------------------------------------------------
  %form--focus {
    &:focus {
      border: 1px solid $focus_border_color;
      box-shadow: 0 0 0 4px $focus_shadow_color;
    }
  }

  // -------------------------------------------------------------------------------------
  // :active時のスタイル
  // -------------------------------------------------------------------------------------
  %form--active {
    &:active {
      border: 1px solid $active_border_color;
    }
  }

  // -------------------------------------------------------------------------------------
  // :disabled時のスタイル
  // -------------------------------------------------------------------------------------
  %form--disabled {
    &:disabled {
      color: $disabled_text_color;
      background-color: $disabled_bg_color;
      opacity: $disabled_opacity;
    }
  }

  // -------------------------------------------------------------------------------------
  // テキスト系
  // -------------------------------------------------------------------------------------
  input[type='text'],
  input[type='tel'],
  input[type='email'],
  input[type='password'],
  textarea {
    padding: 5px 8px;
    background-color: $bg_color;
    border: 1px solid $border_color;
    border-radius: 4px;
    transition: $transition;

    @extend %form--focus;

    @extend %form--active;

    @extend %form--disabled;

    &::placeholder {
      color: #ccc;
    }
  }

  // -------------------------------------------------------------------------------------
  // チェックボックス
  // -------------------------------------------------------------------------------------
  input[type='checkbox'] {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    vertical-align: text-top;
    background-color: $bg_color;
    background-repeat: no-repeat;
    background-position: 0 0;
    border: 1px solid $border_color;
    border-radius: 2px;
    transition: $transition;
    appearance: none;

    @extend %form--focus;

    @extend %form--active;

    @extend %form--disabled;

    &:checked {
      background-color: $checked_bg_color;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23#{str-slice(#{$icon_color}, 2)}' stroke-linecap='square' stroke-linejoin='square' stroke-width='3' d='M5 11l3 3l8-8'/%3e%3c/svg%3e");
      border-color: $checked_border_color;
    }
  }

  .form--check {
    input[type='checkbox'] {
      margin: 0;
    }

    input[type='checkbox']:disabled + label {
      opacity: $disabled_opacity;
    }
  }

  // -------------------------------------------------------------------------------------
  // ラジオボタン
  // -------------------------------------------------------------------------------------
  input[type='radio'] {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    vertical-align: text-top;
    background-color: $bg_color;
    background-repeat: no-repeat;
    background-position: 0 0;
    border: 1px solid $border_color;
    border-radius: 50%;
    transition: $transition;
    appearance: none;

    @extend %form--focus;

    @extend %form--active;

    @extend %form--disabled;

    &:checked {
      background-color: $checked_bg_color;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23#{str-slice(#{$icon_color}, 2)}'/%3e%3c/svg%3e");
      border-color: $checked_border_color;
    }
  }

  .form--radio {
    input[type='radio'] {
      margin: 0;
    }

    input[type='radio']:disabled + label {
      opacity: $disabled_opacity;
    }
  }

  // -------------------------------------------------------------------------------------
  // セレクトボックス
  // -------------------------------------------------------------------------------------
  select {
    padding: 5px 34px 5px 8px;
    background-color: $bg_color;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23#{str-slice(#{$icon_color}, 2)}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 16px 12px;
    border: 1px solid $border_color;
    border-radius: 4px;
    transition: $transition;

    @extend %form--focus;

    @extend %form--active;

    @extend %form--disabled;
  }

  // -------------------------------------------------------------------------------------
  // 必須/任意
  // -------------------------------------------------------------------------------------
  .form--tag {
    display: inline-block;
    padding: 4px 5px;
    margin: 0 8px;
    font-size: g.$font_size_s;
    line-height: 1;
    color: #fff;
    background: #999;
    border-radius: 2px;
  }

  .form--tag-required {
    background-color: #f00;
  }
}