// 
// method
// 
.for(@list, @code) {
  & {
    .loop(@i:0) when (@i < length(@list)) {
      @value: extract(@list, @i+1);
      @code();
      .loop(@i + 1);
    }

    .loop();
  }
}

.vendor(@property, @value) {
  -webkit-@{property}: @value;
   // -khtml-@{property}: @value;
     -moz-@{property}: @value;
          @{property}: @value;
}

// 
// 色を定義
// 
.define-color(@key, @value, @name:~'meltline-color') {
  :root {
    --@{name}-@{key}: @value;
  }
  .text-@{key} {
    color: @value;
  }
  .bg-@{key} {
    background-color: @value;
  }
  .border-@{key} {
    border-color: @value;
  }
}

.define-color-by-object(@key, @value, @name:~'meltline-color') {
  :root {
    --@{name}-@{key}: @value;
  }
  .text-@{key} {
    color: @value !important;
  }
  .bg-@{key} {
    background-color: @value !important;
  }
  .border-@{key} {
    border-color: @value !important;
  }
}

.define-color-grad(@key, @a, @b, @angle:0deg, @name:~'meltline-color') {
  :root {
    --@{name}-@{key}: linear-gradient(@angle, @a 0%, @b 100%);
  }
  .@{key} {
    background-image: -webkit-linear-gradient(@a, @b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .text-@{key} {
    background-image: -webkit-linear-gradient(@a, @b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .bg-@{key} {
    background-image: linear-gradient(@angle, @a 0%, @b 100%);
  }
  .border-@{key} {
    border-image: linear-gradient(@angle, @a 0%, @b 100%);
    border-image-slice: 1;
  }
}

// 現状色はオブジェクトで作られているためfor処理は一旦コメントアウト
// .for(@colors, {
//   .define-color(@value, @value);
// }) !important;


// 
// size
// 
.define-size(@nums, @prefix:~'') {
  .for(@nums, {
    // width
    .@{prefix}w@{value} { width: unit(@value, px); }
    // height
    .@{prefix}h@{value} { height: unit(@value, px); }
    // size
    .@{prefix}s@{value} { width: unit(@value, px); height: unit(@value, px); }
  });
}

.define-size-per(@nums, @prefix:~'') {
  .for(@nums, {
    // width %
    .@{prefix}w@{value}per { width: unit(@value, %); }
    // height %
    .@{prefix}h@{value}per { height: unit(@value, %); }
    // size %
    .@{prefix}s@{value}per { width: unit(@value, %); height: unit(@value, %); }

    // width vw
    .@{prefix}w@{value}vw { width: unit(@value, vw); }
    // height vw
    .@{prefix}h@{value}vw { height: unit(@value, vw); }
    // size vw
    .@{prefix}s@{value}vw { width: unit(@value, vw); height: unit(@value, vw); }

    // width vh
    .@{prefix}w@{value}vh { width: unit(@value, vh); }
    // height vh
    .@{prefix}h@{value}vh { height: unit(@value, vh); }
    // size vh
    .@{prefix}s@{value}vh { width: unit(@value, vh); height: unit(@value, vh); }
  });
}

.define-size-util(@prefix:~'') {
  .@{prefix}w-auto {
    width: auto;
  }
  
  .@{prefix}w-full {
    width: 100%;
  }
  .@{prefix}h-auto {
    height: auto;
  }
  .@{prefix}h-full {
    height: 100%;
  }
  .@{prefix}s-auto {
    width: auto;
    height: auto;
  }
  .@{prefix}s-full {
    width: 100%;
    height: 100%;
  }  
}

.define-size-max(@nums, @prefix:~'') {
  // max-width
  .@{prefix}max-width-@{value} { max-width: unit(@value, px); }
  // max-height
  .@{prefix}max-height-@{value} { max-height: unit(@value, px); }
}

.define-size-min(@nums, @prefix:~'') {
  // min-width
  .@{prefix}min-width-@{value} { min-width: unit(@value, px); }
  // min-height
  .@{prefix}min-height-@{value} { min-height: unit(@value, px); }
}

//
// font-size
//
.define-font-size(@nums, @prefix:~'') {
  .for(@nums, {
    // px
    .@{prefix}fs@{value} { font-size: unit(@value, px); }
    // %
    .@{prefix}fs@{value}per { font-size: unit(@value, %); }
    // em
    .@{prefix}fs@{value}em { font-size: unit(@value, em); }
    // rem
    .@{prefix}fs@{value}rem { font-size: unit(@value, rem); }
  });
}


// 
// box
// 

// padding, margin といったプロパティ定義の大元となる関数
.define-box(@nums, @property, @prefix:~'') {
  .for(@nums, {
    // all
    .@{prefix}@{value} { @{property}: @value * 1px; }
    // top
    .@{prefix}t@{value} { @{property}-top: @value * 1px; }
    // right
    .@{prefix}r@{value} { @{property}-right: @value * 1px; }
    // bottom
    .@{prefix}b@{value} { @{property}-bottom: @value * 1px; }
    // left
    .@{prefix}l@{value} { @{property}-left: @value * 1px; }
    // x
    .@{prefix}x@{value} { @{property}-left: @value * 1px; @{property}-right: @value * 1px; }
    // y
    .@{prefix}y@{value} { @{property}-top: @value * 1px; @{property}-bottom: @value * 1px; }
  });
}

// マイナス値の margin のプロパティ定義の大元となる関数
.define-negative-box(@nums, @property, @prefix:~'') {
  .for(@nums, {
    // all
    .@{prefix}n@{value} { @{property}: @value * -1px; }
    // top
    .@{prefix}tn@{value} { @{property}-top: @value * -1px; }
    // right
    .@{prefix}rn@{value} { @{property}-right: @value * -1px; }
    // bottom
    .@{prefix}bn@{value} { @{property}-bottom: @value * -1px; }
    // left
    .@{prefix}ln@{value} { @{property}-left: @value * -1px; }
    // x
    .@{prefix}xn@{value} { @{property}-left: @value * -1px; @{property}-right: @value * -1px; }
    // y
    .@{prefix}yn@{value} { @{property}-top: @value * -1px; @{property}-bottom: @value * -1px; }
  });
}

// padding を定義
.define-padding(@nums, @prefix:~'') {
  .define-box(@nums, padding, ~'@{prefix}p');
}

// margin を定義
.define-margin(@nums, @prefix:~'') {
  .define-box(@nums, margin, ~'@{prefix}m');
}

// negative-margin を定義
.define-negative-margin(@nums, @prefix:~'') {
  .define-negative-box(@nums, margin, ~'@{prefix}m');
}

// rounded を定義
.define-rounded(@nums, @prefix:~'') {
  .for(@nums, {
    .@{prefix}rounded-@{value} { border-radius: @value * 1px !important; }

    .@{prefix}rounded-top-right-@{value} { border-top-right-radius: @value * 1px !important;}
    .@{prefix}rounded-top-left-@{value} { border-top-left-radius: @value * 1px !important;}
    .@{prefix}rounded-bottom-right-@{value} { border-bottom-right-radius: @value * 1px !important;}
    .@{prefix}rounded-bottom-left-@{value} { border-bottom-left-radius: @value * 1px !important;}
  
    .@{prefix}rounded-top-@{value} {
      border-top-right-radius: @value * 1px !important;
      border-top-left-radius: @value * 1px !important;
    }
    .@{prefix}rounded-bottom-@{value} {
      border-bottom-right-radius: @value * 1px !important;
      border-bottom-left-radius: @value * 1px !important;
    }
  });
}

// rect を定義
.define-rect(@key, @width, @height, @prefix:~'') {
  .@{prefix}@{key} {
    position: relative;

    &:before {
      content: '';
      display: block;
      padding-top: (@height/@width) * 100%;
    }
    &> * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

// rect を定義
.define-aspect-ratio(@key, @width, @height, @prefix:~'') {
  .@{prefix}@{key} {
    aspect-ratio: @width ~"/" @height;
  }
}

// 
// position
// 
.define-position(@nums, @prefix:~'') {
  .for(@nums, {
    // top
    .@{prefix}t@{value} { top: unit(@value, px); }
    // right
    .@{prefix}r@{value} { right: unit(@value, px); }
    // bottom
    .@{prefix}b@{value} { bottom: unit(@value, px); }
    // left
    .@{prefix}l@{value} { left: unit(@value, px); }
  });
}


// hover
.define-hover(@key, @code) {
  .hover-trigger:hover {
    &.hover-@{key}, .hover-@{key} {
      @code();
    }
  }
}