@import "var";

.@{prefixName}-coupon {
  min-height: @coupon-height;
  display: flex;
  flex-direction: column;
  position: relative;
  // background-color: #fff;
  // background: radial-gradient(circle at left 50%, transparent $radial-size, #fff 0) left 0,
  //   radial-gradient(circle at right 50%, transparent $radial-size, #fff 0) right 0;
  // background-size: 51% 100%;
  // background-repeat: repeat-y;
  overflow: hidden;
  border-radius: @coupon-border-radius;
  box-shadow: 0 6px 18px -5px rgba(0, 0, 0, 0.1);

  &__header {
    position: relative;
    // height: 50%;

    &::after {
      content: '';
      position: absolute;
      bottom: -1px;
      height: 1px;
      left: @radial-size;
      right: @radial-size;
      box-sizing: border-box;
      border-top: 1px dashed #ecedee;
    }
  }

  &__body {
    flex: 1;
    position: relative;
    overflow: hidden;

    &-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 168px;
      z-index: 0;
      pointer-events: none;
    }
  }

  &__footer {
    position: relative;
    padding-top: 16px;
    padding-bottom: 16px;
    &::before{
      .single-border(top, 1px, @coupon-border-color, 0, 0);
    }
  }

  &--horizontal{
    flex-direction: row;
    .@{prefixName}-coupon{
      &__header{
        &::after {
          height: auto;
          width: 1px;
          right: -1px;
          left: auto;
          top: @radial-size;
          bottom: @radial-size;
          border-top: none;
          border-right: 1px dashed #ecedee;
        }
      }
    }
  }
}