@import "../common/variables";
@import "../common/mixins";

.@{css-prefix} {
  &-list {
    overflow: hidden;
    position: relative;
    &-item:active {
      background: none; /* for firefox */
    }

    &-img {
      height: 0;
      width: 100%;
      padding: 50% 0;
      overflow: hidden;
      img {
        width: 100%;
        margin-top: -50%;
        background-color: #FFF;
        border: none;
        display: block;
      }
    }

    &-mes {
      background-color: #FFF;
    }

    &-title {
      color: #505050;
      font-size: .26rem;
      text-align: justify;
      font-weight: 800;
    }

    &-other {
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      color: #999;
    }
  }

  &-list-theme1 {
    padding: 0 2px 0;
    .@{css-prefix}-list-item {
      width: 50%;
      float: left;
      padding: 0 2px;
      margin-top: 4px;
      .@{css-prefix}-list {
        &-mes {
          padding: .1rem;
        }
        &-title {
          .text-overflow();
          height: .36rem;
        }
      }
    }
  }

  &-list-theme2 {
    .@{css-prefix}-list-item {
      width: 50%;
      float: left;
      padding-top: 4px;
      &:nth-child(odd) {
        padding-right: 2px;
      }
      &:nth-child(even) {
        padding-left: 2px;
      }
      .@{css-prefix}-list {
        &-mes {
          padding: .1rem;
        }
        &-title {
          .text-overflow();
          height: .36rem;
        }
      }
    }
  }

  &-list-theme3 {
    .@{css-prefix}-list-item {
      width: 50%;
      float: left;
      padding: .2rem;
      position: relative;
      z-index: 0;
      background-color: #FFF;
      &:before {
        .bottom-line(@line-color);
      }
      &:nth-child(odd):after {
        .right-line(@line-color);
      }
      .@{css-prefix}-list {
        &-mes {
          padding-top: .1rem;
        }
        &-title {
          .text-overflow();
          height: .36rem;
        }
      }
      &:active {
        background: #FFF; /* for old android */
      }
    }
  }

  &-list-theme4 {
    padding: 0 7px;
    background-color: #FFF;
    .@{css-prefix}-list-item {
      overflow: hidden;
      display: flex;
      padding: 7px 0 8px 0;
      position: relative;
      &:not(:last-child):after {
        .bottom-line(@line-color);
      }
      .@{css-prefix}-list {
        &-img {
          width: 2rem;
          padding: 1rem 0;
        }
        &-mes {
          flex: 1;
          padding-left: 7px;
        }
        &-title {
          .line-clamp(3, .38rem);
        }
        &-other {
          padding-top: .1rem;
        }
      }
    }
  }

  &-list-theme5 {
    background-color: #FFF;
    .@{css-prefix}-list-item {
      display: block;
      position: relative;
      z-index: 1;
      padding: .2rem .2rem 0 .2rem;
      &:after {
        .bottom-line(@line-color);
      }
      .@{css-prefix}-list {
        &-mes {
          padding: .2rem 0 .15rem;
        }
        &-other {
          padding-top: .06rem;
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .@{css-prefix}-list {
    &-theme1 {
      padding: 0 4px;
      .@{css-prefix}-list-item {
        padding: 0 4px;
        margin-top: 8px;
      }
    }

    &-theme2 {
      .@{css-prefix}-list-item {
        padding-top: 8px;
        &:nth-child(odd) {
          padding-right: 4px;
        }
        &:nth-child(even) {
          padding-left: 4px;
        }
      }
    }

    &-theme4 {
      padding: 0 9px;
      .@{css-prefix}-list-item {
        padding: 9px 0 10px 0;
        .@{css-prefix}-list-mes {
          padding-left: 9px;
        }
      }
    }
  }
}