@import '../style/var';
@import '../style/mixins/ellipsis';

.van-coupon {
  overflow: hidden;
  border-radius: 4px;
  margin: 0 15px 15px;
  background-color: @white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

  &:active {
    background-color: @active-color;
  }

  &__content {
    display: flex;
    height: 100px;
    padding: 24px 0 0 15px;
    box-sizing: border-box;
  }

  p,
  h2 {
    margin: 0;

    .ellipsis();
  }

  h2 {
    height: 34px;
    font-weight: 500;
    line-height: 34px;
  }

  p {
    font-size: 12px;
    line-height: 16px;
    color: @gray-dark;
  }

  &__head {
    position: relative;
    min-width: 95px;

    h2 {
      color: @red;
      font-size: 24px;

      span {
        font-size: 50%;
      }
    }

    p {
      white-space: pre-wrap;
    }
  }

  &__body {
    flex: 1;
    position: relative;
    border-radius: 0 4px 4px 0;

    h2 {
      font-size: 16px;
    }
  }

  &__corner {
    top: 16px;
    right: 15px;
    position: absolute;

    .van-icon {
      border-color: @red;
      background-color: @red;
    }
  }

  &__description {
    padding: 7px 15px;
    border-top: 1px dashed @border-color;
    background-color: @background-color-light;
  }

  &--disabled {
    &:active {
      background-color: @white;
    }

    .van-coupon-item__content {
      height: 90px;
    }

    p,
    h2,
    span {
      color: @gray-dark;
    }
  }
}