@import './theme/default.pcss';
$active_color: $theme-primary-2;
$light_blue: $theme-primary-4;
$disable_color: $theme-stroke-4;
$light_grey: $theme-stroke-6;
$lighter_grey: $theme-stroke-7;
$lightest_grey: $theme-stroke-9;
$error_color: $theme-error-2;
$default_width: 240px;
$double_default_width: 480px;
$input_width: 183px;

.zent-datetime-picker {
  box-sizing: border-box;
  display: inline-block;
  line-height: normal;
  position: relative;

  .picker-seperator {
    font-size: 12px;
    color: $theme-stroke-3;
    padding: 0 10px;
  }

  .picker-input {
    color: $theme-stroke-4;
    position: relative;
    box-sizing: border-box;
    width: $input_width;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: $theme-stroke-10;
    border-radius: 2px;

    &--combine {
      border: 1px solid $theme-stroke-5;
      padding: 0 10px;
    }

    .zent-input {
      background: inherit;
      color: inherit;
    }

    .zenticon {
      line-height: 30px;
      position: absolute;
      right: 10px;
      top: 0;
      color: $theme-stroke-5;
    }

    .zenticon-calendar-o {
      display: block;
    }

    .zenticon-close-circle {
      display: none;
    }

    &--range {
      width: 240px;
    }

    &--showTime {
      width: 320px;
    }

    &--filled {
      color: $theme-stroke-1;

      &:hover {
        .zenticon-close-circle {
          display: block;
        }

        .zenticon-calendar-o {
          display: none;
        }
      }
    }

    &--disabled {
      background: $lightest_grey;
      color: $light_grey;
      cursor: not-allowed;

      &:hover {
        .zenticon-close-circle {
          display: none;
        }

        .zenticon-calendar-o {
          display: block;
        }
      }
    }
  }

  &-popover {
    line-height: 1;
    z-index: 2000;

    .date-picker,
    .month-picker,
    .time-picker,
    .range-picker,
    .week-picker {
      background: $theme-stroke-10;
      width: $default_width;
      font-size: 12px;
      border-radius: 2px;
      box-shadow: 0 1px 4px $theme-mask-2;
      z-index: 10;
    }

    .grid-cell {
      vertical-align: middle;
      padding: 0;
    }

    .range-picker {
      width: $double_default_width;

      .date-picker {
        display: inline-block;
        vertical-align: top;
        box-shadow: none;

        & + .date-picker {
          position: relative;
          box-sizing: border-box;
          border-left: 1px solid $lighter_grey;
          left: -1px;
        }

        .month-panel {
          .grid-cell {
            height: 41.5px;
          }
        }

        .year-panel {
          .grid-cell {
            height: 41.5px;
          }
        }
      }

      &--showTime {
        .date-picker {
          .month-panel,
          .year-panel {
            .grid-cell {
              height: 56px;
            }
          }

          .time-panel {
            .hour-panel,
            .minute-panel,
            .second-panel {
              height: 265px;
            }
          }
        }
      }
    }

    .date-panel,
    .month-panel,
    .year-panel {
      position: relative;
      width: $default_width;
      background: $theme-stroke-10;
      color: $theme-stroke-1;
    }

    .date-picker,
    .week-picker {
      .date-panel {
        .grid-cell {
          padding: 2px 0;
        }
      }

      .month-panel {
        position: absolute;
        top: 0;
        left: 0;

        .grid-cell {
          height: 55.5px;
          vertical-align: middle;
          padding: 0;
        }
      }

      .year-panel {
        .grid-cell {
          height: 55.5px;
          vertical-align: middle;
          padding: 0;
        }
      }
    }

    .month-picker {
      .month-panel {
        .grid-cell {
          height: 36px;
        }

        .year-panel {
          .grid-cell {
            height: 47.5px;
            padding: 0;
          }
        }
      }
    }

    .panel__header {
      position: relative;
      text-align: center;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid $lighter_grey;

      .link--prev {
        cursor: pointer;
        position: absolute;
        left: 25px;
        padding: 0 10px;
        font-size: 8px;

        .zenticon {
          transform: rotate(180deg);
        }
      }

      .link--next {
        cursor: pointer;
        position: absolute;
        right: 25px;
        padding: 0 10px;
        font-size: 8px;
      }

      .panel__title {
        cursor: pointer;
      }
    }

    .panel__footer {
      box-sizing: border-box;
      height: 54px;
      line-height: 54px;
      padding-right: 10px;
      text-align: right;
      border-top: 1px solid $lighter_grey;

      .btn--confirm {
        margin-left: 15px;
      }

      .link--current {
        color: $active_color;
        cursor: pointer;
      }

      .link--disabled {
        color: $disable_color;
      }

      .error-tips {
        color: $error_color;
        font-size: 12px;
      }
    }

    .panel-table {
      padding: 6px;
      justify-content: center;
      align-items: center;

      &__row {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;

        li {
          display: inline-flex;
          flex: 1;
          align-items: center;
          justify-content: center;
        }
      }

      &__head {
        padding: 6px 0;
      }

      .panel__cell {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        border-radius: 2px;
        cursor: pointer;
        position: relative;

        &:hover {
          background: $light_blue;
        }

        &--current {
          color: $active_color;
          border: 1px solid $active_color;
        }

        &--different {
          color: $disable_color;
          background: none;

          &:before,
          &:after {
            display: none;
          }
        }

        &--in-range {
          background: $light_blue;
          border: none;

          &:before {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: $light_blue;
            position: absolute;
            right: -8px;
            top: 0;
          }

          &:after {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: $light_blue;
            position: absolute;
            left: -8px;
            top: 0;
          }
        }

        &--in-selected {
          background: $light_blue;
          border: none;

          &:before {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: $light_blue;
            position: absolute;
            right: -8px;
            top: 0;
          }

          &:after {
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: $light_blue;
            position: absolute;
            left: -8px;
            top: 0;
          }
        }

        &--disabled {
          cursor: not-allowed;
          color: $lighter_grey;
          border-color: $lighter_grey;

          &:hover {
            background: $theme-stroke-10;
          }

          &:before,
          &:after {
            display: none;
          }
        }

        &--selected {
          background: $active_color;
          color: $theme-stroke-10;

          &:hover {
            background: $active_color;
          }
        }

        &.date-panel__cell {
          width: 20px;
          height: 20px;
          line-height: 20px;
        }

        &.month-panel__cell {
          width: 32px;
          height: 32px;
          line-height: 32px;
        }

        &.year-panel__cell {
          width: 50px;
          height: 30px;
          line-height: 30px;
        }
      }
    }

    .year-panel {
      position: absolute;
      top: 0;
      left: 0;
    }

    .time-panel {
      &__cell {
        padding: 3px;
      }

      .panel-table__row:last-child {
        display: block;

        .grid-cell {
          width: 14.28%;
        }
      }

      .hour-panel,
      .minute-panel,
      .second-panel {
        position: absolute;
        top: 0;
        left: 0;
        height: 327px;
        width: $default_width;
        background: $theme-stroke-10;
      }

      &__preview {
        margin: 12px 10px;
        height: 31px;
        line-height: 31px;
        border: 1px solid $theme-stroke-5;
        border-radius: 2px;
        text-align: center;
        display: flex;

        .time__number {
          flex: 1;
          cursor: pointer;
          border-right: 1px solid $theme-stroke-5;

          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}