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

:root {
  --glm-coupon-margin: @coupon-margin;
  --glm-coupon-content-height: @coupon-content-height;
  --glm-coupon-content-padding: @coupon-content-padding;
  --glm-coupon-content-text-color: @coupon-content-text-color;
  --glm-coupon-background-color: @coupon-background-color;
  --glm-coupon-active-background-color: @coupon-active-background-color;
  --glm-coupon-border-radius: @coupon-border-radius;
  --glm-coupon-box-shadow: @coupon-box-shadow;
  --glm-coupon-head-width: @coupon-head-width;
  --glm-coupon-amount-color: @coupon-amount-color;
  --glm-coupon-amount-font-size: @coupon-amount-font-size;
  --glm-coupon-currency-font-size: @coupon-currency-font-size;
  --glm-coupon-name-font-size: @coupon-name-font-size;
  --glm-coupon-disabled-text-color: @coupon-disabled-text-color;
  --glm-coupon-description-padding: @coupon-description-padding;
  --glm-coupon-description-border-color: @coupon-description-border-color;
  --glm-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color;
}

.glm-coupon {
  margin: var(--glm-coupon-margin);
  overflow: hidden;
  background: var(--glm-coupon-background-color);
  border-radius: var(--glm-coupon-border-radius);
  box-shadow: var(--glm-coupon-box-shadow);

  &:active {
    background-color: var(--glm-coupon-active-background-color);
  }

  &__content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--glm-coupon-content-height);
    padding: var(--glm-coupon-content-padding);
    color: var(--glm-coupon-content-text-color);
  }

  &__head {
    position: relative;
    min-width: var(--glm-coupon-head-width);
    padding: 0 var(--glm-padding-xs);
    color: var(--glm-coupon-amount-color);
    text-align: center;
  }

  &__amount,
  &__condition,
  &__name,
  &__valid {
    .ellipsis();
  }

  &__amount {
    margin-bottom: 6px;
    font-weight: var(--glm-font-weight-bold);
    font-size: var(--glm-coupon-amount-font-size);
    .ellipsis();

    span {
      font-weight: normal;
      font-size: var(--glm-coupon-currency-font-size);

      &:not(:empty) {
        margin-left: 2px;
      }
    }
  }

  &__condition {
    font-size: var(--glm-font-size-sm);
    line-height: 16px;
    white-space: pre-wrap;
  }

  &__body {
    position: relative;
    flex: 1;
    border-radius: 0 var(--glm-coupon-border-radius)
      var(--glm-coupon-border-radius) 0;
  }

  &__name {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: var(--glm-coupon-name-font-size);
    line-height: var(--glm-line-height-md);
  }

  &__valid {
    font-size: var(--glm-font-size-sm);
  }

  &__corner {
    position: absolute;
    top: 0;
    right: var(--glm-padding-md);
    bottom: 0;

    .glm-checkbox__icon--checked .glm-icon {
      background-color: var(--glm-coupon-corner-checkbox-icon-color);
      border-color: var(--glm-coupon-corner-checkbox-icon-color);
    }
  }

  &__description {
    padding: var(--glm-coupon-description-padding);
    font-size: var(--glm-font-size-sm);
    border-top: 1px dashed var(--glm-coupon-description-border-color);
  }

  &--disabled {
    &:active {
      background-color: var(--glm-coupon-background-color);
    }

    .glm-coupon-item__content {
      height: calc(var(--glm-coupon-content-height) - 10px);
    }

    .glm-coupon__head {
      color: inherit;
    }
  }
}