/*
    Sass/SCSS範例網頁(SCSS)
    By 萌芽系列網站 ‧ Mnya Series Website ‧ Mnya.tw
*/

/* $ 變數 */

$box1-bgcolor: #8200c3;
$box2-bgcolor: #7d6400;
$box3-bgcolor: #00a56e;
$switch-bgcolor: true;
/* 變色開關：true=開啟, false=關閉 */
$box-color: #fff;
$padding: 2px;

/* @mixin 函數 */

@mixin transition($property, $period) {
  -webkit-transition: $property #{$period}s ease;
  -moz-transition: $property #{$period}s ease;
  -ms-transition: $property #{$period}s ease;
  -o-transition: $property #{$period}s ease;
  transition: $property #{$period}s ease;
}

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

/* 開始 */

#box {
  display: flex;
  margin: 5px;
  color: $box-color;
}

.box {
  width: 200px;
  height: 250px;
  margin: 5px 8px;
  padding: $padding * 5;
  background: #181818;
  font: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 22px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  @include border-radius(10px);
  @include transition(all, 0.5);

  .title {
    margin: 3px;
    padding-left: $padding * 4;
    font-size: 20px;
    line-height: 28px;
    border-left: 8px $box-color solid;
    color: $box-color;
    @include transition(all, 0.3);
  }

  &:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);

    .title {
      border-left: 12px $box-color solid;
    }
  }
}

$list: 1 2 3;

@each $box-num in $list {
  .box#{$box-num} {
    @extend .box;
  }
}

@if $switch-bgcolor==true {
  .box1 {
    background: $box1-bgcolor;
  }

  .box2 {
    background: $box2-bgcolor;
  }

  .box3 {
    background: $box3-bgcolor;
  }
}