@import '~antd-mobile-v2/lib/style/themes/default.less';
@import '../index.less';

@prefixCls: alitajs-dform;

@keyframes colorful {
  0% {
    background-color: #fff;
  }

  100% {
    background-color: @alita-dform-radio-color;
  }
}

.@{prefixCls} {
  .alitajs-dform-item-content {
    padding-right: 12 * @hd;
    margin-left: 12 * @hd;
    border-bottom: 0.5 * @hd solid #e5e5e5;
  }

  .alitajs-dform-title-content {
    font-size: @alita-dform-title-font-size !important;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  &-item {
    // min-height: @alita-dform-height;
    padding: @alita-dform-padding;

    // input::-webkit-input-placeholder {
    //   font-size: @alita-dform-value-font-size;
    // }

    // input:-moz-placeholder {
    //   font-size: @alita-dform-value-font-size;
    // }
    // input::-moz-placeholder {
    //   font-size: @alita-dform-value-font-size;
    // }
    .alitajs-dform-item-content();
  }

  &-vertical-item {
    height: auto;
    padding: @alita-dform-padding;
    .alitajs-dform-item-content();
  }

  &-close {
    width: 12 * @hd;
    height: 12 * @hd;
  }

  &-title {
    color: @alita-dform-title-color;
    // white-space: nowrap;
    .alitajs-dform-title-content();
    padding-top: 1 * @hd;
  }
  &-vertical-title {
    padding-bottom: 12 * @hd;
  }

  &-redStar {
    // margin-right: 3 * @hd;
    color: rgba(255, 72, 72, 1);
    font-size: @alita-dform-title-font-size !important;
    padding-top: 2 * @hd;
  }

  &-error {
    // .alitajs-dform-title {
    //   color: rgba(255, 72, 72, 1);
    // }

    &-text {
      color: rgba(255, 72, 72, 1);
      font-size: 14 * @hd;
      padding-top: 4 * @hd;
    }
  }

  &-input-label {
    &-0 {
      width: 0px;
    }
    &-2 {
      width: 2 * @input-label-width;
    }
    &-3 {
      width: 3 * @input-label-width;
    }
    &-4 {
      width: 4 * @input-label-width;
    }
    &-5 {
      width: 5 * @input-label-width;
    }
    &-6 {
      width: 6 * @input-label-width;
    }
    &-7 {
      width: 7 * @input-label-width;
    }
    &-auto {
      width: auto;
    }
    &-min-width {
      max-width: 30%;
    }
  }

  &-placeholder {
    width: 100%;
  }

  &-value-content {
    width: 100%;
  }

  &-arrow-horizontal {
    display: block;
    width: 12 * @hd;
    height: 12 * @hd;
    margin-left: @h-spacing-md;
    color: rgb(0, 0, 0);
    .encoded-svg-background('right');

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  &-clear {
    flex-shrink: 0;
    display: none;
    width: @icon-size-sm;
    height: @icon-size-sm;
    border-radius: @radius-circle;
    overflow: hidden;
    font-style: normal;
    color: @fill-base;
    background-color: @input-color-icon;
    background-repeat: no-repeat;
    .encoded-svg-background('input_item_delete');

    background-size: @icon-size-sm auto;
    background-position: 2 * @hd 2 * @hd;

    &-active {
      background-color: @input-color-icon-tap;
    }
  }

  &-close {
    width: @icon-size-xs;
    height: @icon-size-xs;
    flex-shrink: 0;
    margin: 2 * @hd 4 * @hd;
  }

  &-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.alitajs-dform-hide {
  height: 0px;
  overflow: hidden;
}

.alitajs-dform-line {
  display: inline-block;
  min-width: 17 * @hd;
  height: 100%;
  color: rgba(0, 0, 0, 0.45);
  font-size: 17 * @hd;
  white-space: nowrap;
  text-align: center;
  vertical-align: top;
  pointer-events: none;
}

.alitajs-dform-disabled {
  color: @color-text-disabled !important;
  .am-input-control {
    input {
      color: @color-text-disabled !important;
      font-size: @alita-dform-value-font-size !important;
    }
  }

  .am-textarea-control {
    textarea {
      color: @color-text-disabled !important;
      font-size: @alita-dform-value-font-size !important;
    }
  }

  .am-list-item .am-list-line .am-list-extra {
    color: @color-text-disabled;
  }

  .alitajs-dform-radio-checked {
    border: 1 * @hd solid @color-text-disabled !important;
  }
  .alitajs-dform-radio-inner-button {
    background-color: @color-text-disabled !important;
  }
}

.alitajs-dform-input-title {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding-right: 15 * @hd;
}

.alitajs-dform-vertical-picker {
  .am-list-extra {
    flex-basis: 100% !important;
    text-align: left !important;
  }
}

.alitajs-dform-right-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.alitajs-dform-extra {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .alitajs-dform-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;

    // input[type="file"]::-webkit-file-upload-button {
    //   width: 100%;
    //   position: absolute;
    //   right: 0px;
    // }
  }

  .alitajs-dform-file-extra {
    font-size: @alita-dform-title-font-size;

    .alitajs-dform-file-img {
      width: 18 * @hd;
      height: 18 * @hd;
    }
  }
}

.alitajs-dform-tick {
  width: 5 * @hd;
  height: 10 * @hd;
  border-bottom: 2 * @hd solid @alita-dform-radio-color;
  border-right: 2 * @hd solid @alita-dform-radio-color;
  transform: rotate(40deg);
  margin-right: 15 * @hd;
}
