@import './var';
.#{$prefix}list {
  padding: 0;
  list-style: none;
  color:$color-text;
  > li {
    line-height: 1.5;
    margin-bottom: $list-margin-bottom;
    box-sizing: border-box;
    &:last-child{
      margin-bottom: 0;
    }
    > .#{$prefix}list {
      padding: 10px 0;
    }
    &.#{$prefix}list__status{
    color:$list-color-text-weak;
    cursor: default;
    display: flex;
    &:hover{
      background-color: transparent;
    }
  }
  }
  .#{$prefix}list__separate{
    position: relative;
    height: 9px;
    padding:0;

    &::after{
      content:"";
      left:10px;
      right:10px;
      top:4px;
      height: 1px;
      background-color: $list-color-border-inner;
      position: absolute;
    }
    &:hover{
      background-color: unset;
      cursor: default;
    }
  }

  &--bullet {
    > li {
      position: relative;
      padding-left: 10px;
      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        background-color: $list-color-text;
        position: absolute;
        left: 0;
        top: 6px;
        border-radius: 100%;
      }
    }
  }
  &--number {
    counter-reset: number;

    > li {
      position: relative;
      padding-left: 13px;
      &::before {
        content: "";
        display: inline-block;
        color: inherit;
        counter-increment: number;
        content: counter(number) ".";
        position: absolute;
        left: 0;
        top: 0px;
        width:9px;
        text-align: right;
        white-space: nowrap;
      }
    }
    &.is-2digits{
      > li{
        padding-left:22px ;
        &::before {
          width:18px;
        }
      }
    }
    &.is-3digits{
      > li{
        padding-left:31px ;
        &::before {
          width:27px;
        }
      }
    }
    &.is-4digits{
      > li{
        padding-left:40px ;
        &::before {
          width:36px;
        }
      }
    }
  }
  &--divider {
    > li {
      position: relative;
      padding: 6px 0;
      margin-bottom: 0;
    }
    > li:nth-child(n+2) {
      border-top: 1px solid $list-color-border-inner;
    }
  }
  &--striped {
    > li {
      position: relative;
      padding: 6px;
      margin-bottom: 0;
    }
    > li:nth-child(odd) {
      background: $list-color-bg-gray;
      border-top: 1px solid $list-color-border-inner;
      border-bottom: 1px solid $list-color-border-inner;
    }
  }

  &--option {
    max-height: 165px;
    overflow-y: auto;
    > li {
      margin-bottom: 0;
      font-size:$list-font-size-default;
      padding:$list-option-li-padding;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color:$list-color-text-weight;
      display: block;
      cursor: pointer;
      // position: relative;
      &:hover {
        background-color: $list-color-bg-hover;
      }

      &:first-child {
        border-radius:$list-border-radius $list-border-radius 0 0;
      }
      &:last-child{
        border-radius: 0 0 $list-border-radius $list-border-radius;
      }
      &:first-child:last-child {
        border-radius: $list-border-radius;
      }

    }


    .#{$prefix}list__submenu {
      &::after {
        content: '';
        width: 16px;
        height: 16px;
        right: 5px;
        position: absolute;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: inherit;
        background-image: $list-submenu-background-image;
      }
      .#{$prefix}dropdown-box {
        display: none;
        left: 100%;
        margin-top: -25px;
        position: absolute;
      }
      &.is-hover {
        & > .#{$prefix}dropdown-box {
          display: block;
          bottom: auto;
        }
      }
    }
    &.#{$prefix}list--checkoption{
      >li{padding:0;}
      .#{$prefix}form-check{
        min-height: 30px;
        display: block;
        margin-right: 0;
        padding: 6px 10px 6px 31px;
        .#{$prefix}checkbox {
            top: 6px;
            left: 10px;
        }
      }
      .#{$prefix}action-state{
        display: block;
        padding:6px 10px;
      }

    }
    > li.is-disabled {
      background-color: transparent;
      color: $list-color-text-disabled;
      cursor: not-allowed;
    }
    > li.is-selected {
      background-color:$list-primary-color-bg;
      color: $list-primary-color-text-anti;
      .#{$prefix}list__item{
        color: $list-primary-color-text-anti;
      }
    }
    >li.is-current{
      background-color: $list-color-bg-hover;
    }

  }

  &--group{
    > li{
      padding-left:$list-group-li-padding-left;
    }
    .#{$prefix}list__item--single{
      padding-left: 10px;
    }
    .#{$prefix}list__label {
      cursor: default;
      margin: 0;
      padding: $list-group-label-padding;
      height: 30px;
      line-height: 30px;
      color:$list-color-text-label;
      &:hover {
        background-color: $list-color-bg;
      }
    }

    &.#{$prefix}list--checkoption{

      .#{$prefix}list__label{
        padding:0 10px;
      }
    }
  }



}

.#{$prefix}announce {
  width: 100%;
  box-sizing: border-box;
  padding-right: 80px;
  position: relative;
  &__title {
    font-weight: 400;
    font-size: $list-font-size-l;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    a {
      color: $list-color-text;
    }
  }
  &__extend {
    font-size:$list-font-size-l;
    color: $list-color-text;
    position: absolute;
    right: 0;
    top: 0;
    text-align: left;
  }
}

.#{$prefix}list.#{$prefix}list--divider.#{$prefix}list--bullet {
  > li {
    padding: 6px 0 6px 10px;
    &:before {
      top: 12px;
    }
  }
}
.#{$prefix}list.#{$prefix}list--divider.#{$prefix}list--number {
  > li {
    padding: 6px 0 6px 15px;
    &::before {
      top: 6px;
    }
  }
}

.#{$prefix}list.#{$prefix}list--striped.#{$prefix}list--bullet {
  > li {
    padding: 6px 0 6px 15px;
    &:before {
      left: 5px;
      top: 12px;
    }
  }
}
.#{$prefix}list.#{$prefix}list--striped.#{$prefix}list--number {
  > li {
    padding: 6px 0 6px 20px;
    &::before {
      left: 5px;
      top: 6px;
    }
  }
}