$primaryColor: #038cd6;
$inRangeColor: #c2dcef;
$defaultColor: #8391a5;

.gmi-date-picker {
  width: 254px;
  transition: all ease-in-out 0.2s;

  @at-root &.has-time {
    width: 324px;
  }

  &__header__icon-btn {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 3px 0;
    float: right;
    cursor: pointer;
    color: #475669!important;

    &:hover {
      color: $primaryColor;
    }
  }

  &[data-role='year'] {
    .gmi-date-picker__header__label--year:hover {
      color: #475669!important;
      cursor: default;
    }
  }
}

.gmi-picker-panel {
  line-height: 20px;
  color: #475669;
  background-color: #fff;
  border: 1px solid #d3dce6;
  border-radius: 2px;
  box-shadow: 0 2px 5px #ccc;
  margin: 5px 0;
  z-index: 2008;

  span {
    color: #475669;
    font-size: 14px;
    padding: 0 3px;
    cursor: pointer;

    &:first-child {
      padding-left: 0;
    }

    &:hover {
      color: $primaryColor;
      text-decoration: none;
    }
  }

  &__body {
    width: 100%;
    height: 100%;
  }

  &__body__header {
    line-height: 22px;
    padding: 12px 20px 5px;

    span[class^=gmi-date-picker__header__label--]{
      color: #475669 !important;

      &:hover {
        color: $primaryColor!important;
      }
    }
  }

  .gmi-year-picker__header, .gmi-month-picker__header {
    padding-bottom: 10px;
  }

  &__body__header--time {
    padding: 8px;
    border-bottom: 1px solid #d3dce6;
    min-height: 30px;

    &__wrapper {
      width: 50%;
      float: left;
      padding: 0 5px;
      box-sizing: border-box;

      .gmi-input {
        width: 100%;
        display: inline-block;

        &__inner {
          width: 100%;
          height: 30px;
          -webkit-appearance: none;
          -moz-appearance: none;
          border-radius: 2px;
          border: 1px solid #bfcbd9;
          box-sizing: border-box;
          color: #1f2d3d;
          display: block;
          line-height: 1;
          outline: none;
          padding: 3px 10px;
          font-size: 13px;
          transition: border-color .4s cubic-bezier(.645,.045,.355,1);

          &:hover {
            border: 1px solid $primaryColor;
          }
        }
      }

      .gmi-time-picker--wrapper {
        position: relative;
        zoom: 1;
      }
    }
  }

  &__btn--prev {
    background: url("/images/arrow-up.png",true) no-repeat center center;
    background-size: 100% 100%;
  }

  &__btn--next {
    background: url("/images/arrow-down.png",true) no-repeat center center;
    background-size: 100% 100%;
    margin-left: 15px;
  }

  &__body__main {
    min-width: 224px;
    padding: 0 15px 15px;
  }

  // 导入基础日历表格样式
  @import "datepicker-table";

  &__footer {
    padding: 0 8px;
    border-top: 1px solid #d3dce6;
    text-align: right;
    background-color: #fff;

    .gmi-picker-panel__link-btn {
      display: inline-block;
      color: $primaryColor;
      padding: 10px 5px;

      &--default {
        color: $defaultColor;
      }

      &--primary {
        color: $primaryColor;
      }

      &:hover {
        text-decoration: none;
      }

      &.disabled {
        color: #ccc;
        cursor: not-allowed;
      }
    }
  }

  &.placement-left-bottom {
    -ms-transform-origin: 0 bottom!important;
    transform-origin: 0 bottom!important;
  }

  &.placement-center-bottom {
    -ms-transform-origin: 50% bottom!important;
    transform-origin: 50% bottom!important;
  }

  &.placement-right-bottom {
    -ms-transform-origin: 100% bottom!important;
    transform-origin: 100% bottom!important;
  }
}

// 导入双日历样式
@import "datepicker-range";

// 导入时间选择器样式
@import "timepicker";

.picker-show {
  animation: showPanel 0.2s ease-in-out;
  -webkit-animation: showPanel 0.2s ease-in-out;
  animation-fill-mode: forwards;
}

.picker-hide {
  animation: hidePanel 0.2s ease-in-out;
  -webkit-animation: hidePanel 0.2s ease-in-out;
  animation-fill-mode: forwards;
}

@-webkit-keyframes showPanel {
  0% {
    opacity: 0;
    transform: scale(0, 0);
    -ms-transform: scale(0, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
  }
}
@-webkit-keyframes hidePanel {
  0% {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
  }

  100% {
    opacity: 0;
    transform: scale(0, 0);
    -ms-transform: scale(0, 0);
  }
}