@import '../../../style/mixin.less';

.@{prefix}-date-picker {
    &-show {
        display: flex;
        .use-var(font-size, date-picker-range-font-size);
        .use-var(padding, date-picker-range-show-padding);
        .use-var(color, date-picker-range-disabled-font-color);
        .use-var(min-height, date-picker-range-show-min-height);
        .use-var(background-color, date-picker-range-background-color);
        & > span {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &-separate {
            flex: 0 1 auto;
            .use-var(min-width, date-picker-range-separate-min-width);
        }
    }
    &-range-item {
        flex: 1 0 auto;
        &-active {
            .use-var(color, date-picker-range-font-color);
        }
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-date-picker {
    &-show {
      @{arco-dark-mode-selector} & {
        .use-var(color, dark-date-picker-range-disabled-font-color);
        .use-var(background-color, dark-date-picker-range-background-color);
      }
    }
    &-range-item {
      &-active {
        @{arco-dark-mode-selector} & {
          .use-var(color, dark-date-picker-range-font-color);
        }
      }
    }
  }
}
/********************* End *************************/