link_list_01

// =====================================================================================
//
// link_list_01
//
// =====================================================================================

@use 'scss/global' as g;

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

// コンテナで.holderを継承するか（0=継承しない / 1=継承する）
// .holder相当の要素が、既にコンテナの外側にある場合は0に設定してください
$inherit_holder: 1;

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

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

// アイコンカラー ※Hexのみ。rgba()などは非対応
$color_icon: g.$color_text_base;

// -------------------------------------------------------------------------------------
// コンテナ
// -------------------------------------------------------------------------------------
.link_list_01 {
  @if $inherit_holder == 1 {
    @include g.holder();
  }
}

// -------------------------------------------------------------------------------------
// リンク単体の外枠
// -------------------------------------------------------------------------------------
.link_list_01--item {
  border-bottom: 1px solid g.$color_border;

  &:first-child {
    border-top: 1px solid g.$color_border;
  }
}

// -------------------------------------------------------------------------------------
// リンク単体のクリッカブルエリア（<a>〜</a>）
// -------------------------------------------------------------------------------------
.link_list_01--item_label {
  display: block;
  padding: 27px 24px;
  background-color: #fff;
  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 20px top 50%;
  background-size: 12px 12px;

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

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