@import "common/variable";
@import "mixins/bem-mixin";

@include b(date) {
  display: inline-block;
  @include e(input) {
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid $third-level-color;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: $form-element-height;
    line-height: $form-element-height;
    outline: none;
    padding: 0 12px;
    width: 100%;
  }
}

@include b(date-picker) {
  position: fixed;
  border: 1px solid $third-level-color;
  background: #fff;
  box-shadow: $third-level-color 0 0 5px;
  padding: 10px;
  opacity: 0;
  box-sizing: border-box;
  transition: all .3s;
  display: inline-block;

  @include e(year-month) {
    padding: 0 0 5px 0;
    border-bottom: 1px solid $third-level-color;
    display: flex;
    box-sizing: border-box;
    @include e(year) {
      padding: 5px 10px;
      flex: 1;
      text-align: right;
    }
    @include e(month) {
      padding: 5px 10px;
      flex: 1;
      text-align: left;
    }
    @include e(change) {
      box-sizing: border-box;
      padding: 5px;
      cursor: pointer;
      width: auto;
      @include when(right) {
      }
      @include pseudo(hover) {
        background: $fifth-level-color;
        color: $primary;
      }
    }
  }
  @include e(day) {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: $date-picker-width;
    @include e(row) {
      @include e(cell) {
        text-align: center;
        padding: 10px 0;
        @include when(enable-select) {
          cursor: pointer;
          @include pseudo(hover) {
            background: $fifth-level-color;
          }
        }
        @include when(active) {
          background: $fifth-level-color;
          color: $primary;
        }
      }
    }
  }
  @include e(time) {
    padding: 0 0 10px 0;
    display: flex;
    width: $date-picker-width;
    @include e(hour) {
      width: 30%;
    }
    @include e(minute) {
      width: 30%;
    }
    @include e(second) {
      width: 30%;
    }
    @include e(split) {
      display: flex;
      width: 5%;
      justify-content: center;
      align-items: center;
    }
  }
  @include e(btn-box) {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid $third-level-color;
  }
}