//----------------------------------------------------
// Elements: List
//----------------------------------------------------

//----------------------------------------------------
// / Variables
//----------------------------------------------------

// Selectors
$selector-list: "\.list" !default;
$selector-list-item: "\.item" !default;

// Modifiers
$modifier-list-disc: "\.is-disc" !default;
$modifier-list-circle: "\.is-circle" !default;
$modifier-list-square: "\.is-square" !default;
$modifier-list-kome: "\.is-kome" !default;
$modifier-list-decimal: "\.is-decimal" !default;
$modifier-list-note: "\.is-note" !default;

// List
$list-margin-left: 1.5em !default;
$list-item-margin-top: 0.25em !default;
$list-disc-item-list-style: disc outside !default;
$list-circle-item-list-style: circle outside !default;
$list-square-item-list-style: square outside !default;
$list-decimal-item-list-style: decimal outside !default;
$list-kome-unicode: unquote('"') + unquote(str-insert("203B", "\\", 1)) +
  unquote('"') !default;

// List Note
$list-note-item-margin-left: 0.25em !default;

//----------------------------------------------------
// / Style - List
//----------------------------------------------------

@mixin musubii-style-list() {
  margin-left: $list-margin-left;
}

@mixin musubii-style-list-not-first-item() {
  margin-top: $list-item-margin-top;
}

@mixin musubii-style-list-item-child-list() {
  margin-top: $list-item-margin-top * 2;
}

@mixin musubii-style-list-disc-item() {
  display: list-item;
  list-style: $list-disc-item-list-style;
}

@mixin musubii-style-list-square-item() {
  display: list-item;
  list-style: $list-square-item-list-style;
}

@mixin musubii-style-list-circle-item() {
  display: list-item;
  list-style: $list-circle-item-list-style;
}

@mixin musubii-style-list-kome-item() {
  position: relative;
  display: block;
  &:before {
    content: $list-kome-unicode;
    position: absolute;
    top: 0;
    left: -1em;
  }
}

@mixin musubii-style-list-decimal-item() {
  display: list-item;
  list-style: $list-decimal-item-list-style;
}

@include generate-style($option-generate-style-list) {
  #{$selector-list} {
    &#{$modifier-list-disc},
    &#{$modifier-list-circle},
    &#{$modifier-list-square},
    &#{$modifier-list-kome},
    &#{$modifier-list-decimal} {
      @include musubii-style-list();
      > {
        #{$selector-list-item} {
          &:not(:first-child) {
            @include musubii-style-list-not-first-item();
          }
          > {
            #{$selector-list} {
              @include musubii-style-list-item-child-list();
            }
          }
        }
      }
    }
    &#{$modifier-list-disc} {
      > {
        #{$selector-list-item} {
          @include musubii-style-list-disc-item();
        }
      }
    }
    &#{$modifier-list-circle} {
      > {
        #{$selector-list-item} {
          @include musubii-style-list-circle-item();
        }
      }
    }
    &#{$modifier-list-square} {
      > {
        #{$selector-list-item} {
          @include musubii-style-list-square-item();
        }
      }
    }
    &#{$modifier-list-kome} {
      > {
        #{$selector-list-item} {
          @include musubii-style-list-kome-item();
        }
      }
    }
    &#{$modifier-list-decimal} {
      > {
        #{$selector-list-item} {
          @include musubii-style-list-decimal-item();
        }
      }
    }
  }
}

//----------------------------------------------------
// / Style - List Note
//----------------------------------------------------

@mixin musubii-style-list-note-item() {
  display: flex;
}

@mixin musubii-style-list-note-item-not-first-child() {
  margin-left: $list-note-item-margin-left;
}

@include generate-style($option-generate-style-list) {
  @if $option-add-style-list-note == true {
    #{$selector-list} {
      &#{$modifier-list-note} {
        > {
          #{$selector-list-item} {
            @include musubii-style-list-note-item();
            > *:not(:first-child) {
              @include musubii-style-list-note-item-not-first-child();
            }
          }
        }
      }
    }
  }
}
