//指定したclassがネスト内にあるかチェック
@function is-inside($target) {
  @return if("#{selector-replace(&, $target, ".replaced")}" != "#{&}", true, false);
}

//ネストされたセレクターの直前の親セレクターを取得する関数
//.hoge .hoge__box だと .hoge__box を取得
@function parent($value) {
  $selector: $value;
  $array: "";
  $space: if(str-index($selector, " "), str-index($selector, " "), 0);//セレクターのスペースの位置を保存※スペースがなければ0

  //セレクターにスペースがあれば繰り返し
  @while $space > 0 {
    $selector: str-insert($selector, ',', $space);//スペースの位置に,（カンマ）を挿入
    $array: selector-parse($selector);//配列に変換
    // 	// $l: length($array);
    $selector: #{nth($array, length($array))};//配列の最後を取得
    $space: if(str-index($selector, " "), str-index($selector, " "), 0);//セレクターのスペースの位置を保存※スペースがなければ0
  }
  @return "#{$selector}";
}


@mixin state ($target, $state) {
  //ネストの外か内を判定
  @if is-inside($target) {
    @at-root #{selector-replace(&, $target, $target + $state)} {
      @content
    }
  } @else {
    @if $target == parent(#{&})  {
      @at-root #{selector-replace(&, parent(#{&}), $target + $state)} {
        @content
      }
    } @else {
      @at-root #{selector-replace(&, parent(#{&}), $target + $state + " " + parent(#{&}))} {
        @content
      }
    }
  }
}

@mixin col($col: 3, $marginRight: 15, $marginTop: 10, $parent: ""){
	width: calc((100% - #{$marginRight * $col +px} * (#{$col} - #{$col - 1})) / #{$col} - 0.1px);
	margin-right: #{$marginRight / 2 +px};
	margin-left: #{$marginRight / 2 +px};
	margin-bottom: #{$marginTop+px};
	@at-root #{$parent} {
		margin-right: -#{$marginRight / 2 +px};
		margin-left: -#{$marginRight / 2 +px};
		margin-bottom: -#{$marginTop+px};
	}
}

.l-wrapper {
  max-width: 700px;
  width: 100%;
  padding: 30px ;
  margin: 0 auto;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
}

.card {
  @include col(2, 20, 20, ".card-list");
}

.card__inner {
  display: block;
  padding: 10px;
  border: solid 4px #6B6D80;
  background: #f5deb3;
  text-decoration: none;
  @include state(".card", ".-purple") {
    background: #875396;
  }
  @include state(".card", ".-white") {
    background: #DAD9D8;
  }
  @include state(".card", ".-black") {
    background: #202225;
  }
  @include state(".card", ".-blue") {
    background: #2D6BAD;
  }
  &:hover {
    text-decoration: none;
  }
}

.card__title {
  padding: 5px;
  background: rgba(#fff, 0.3);
  font-size: 18px;
  font-weight: bold;
  color: #333;
  @include state(".card__inner", ":hover") {
    color: #fff;
  }
}

.card__image {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  &:before {
    content: "";
    display: block;
    padding-top: 110%;
  }
}

.card__image-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
  @include state(".card__inner", ":hover") {
    transform: scale(1.2);
  }
}

.card__detail {
  margin-top: 10px;
  padding: 10px;
  background: rgba(#fff, 0.3);
}

.card__text {
  font-size: 12px;
  color: #333;
  line-height: 1.6;
}