@import 'theme/default';
@import 'theme/font';

$active: 4; // primary
$disable: 3; // stroke
$light-grey: 5; // stroke
$lighter-grey: 6; // stroke
$lightest-grey: 8; // stroke
$error: 2; // error

$default-width: 240px;
$double-default-width: 480px;
$input-width: 190px;

@mixin light-background {
  @include theme-color(background-color, primary, 8);
}

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

  .picker-seperator {
    @include theme-color(color, stroke, 1);
    font-size: $font-size-normal;
    padding: 0 10px;
  }

  .picker-input {
    @include theme-color(color, stroke, 1);
    @include theme-color(background-color, stroke, 9);
    position: relative;
    box-sizing: border-box;
    width: $input-width;
    font-size: $font-size-normal;
    border-radius: 2px;

    &--icon {
      font-size: 18px;
    }

    &--combine {
      @include theme-color(border-color, stroke, 4);
      border-width: 1px;
      border-style: solid;
      padding: 0 10px;
    }

    &--combine.picker-input--disabled {
      @include theme-color(border-color, stroke, 6);
    }

    .zent-input {
      color: inherit;
    }

    .zenticon {
      @include theme-color(color, stroke, 4);
      line-height: 32px;
      position: absolute;
      right: 10px;
      top: 0;
    }

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

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

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

    &--range {
      width: 240px;
    }

    &--showTime {
      width: 320px;
    }

    &--show-clear-icon {
      @include theme-color(color, stroke, 1);

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

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

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

    &--disabled {
      @include theme-color(background-color, stroke, $lightest-grey);
      @include theme-color(color, stroke, $light-grey);
      cursor: not-allowed;

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

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

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

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

    .date-picker,
    .month-picker,
    .time-picker,
    .range-picker,
    .week-picker,
    .year-picker,
    .quarter-picker {
      @include theme-color(background-color, stroke, 9);
      width: $default-width;
      font-size: $font-size-normal;
      border-radius: 2px;
      box-shadow: $shadow-spec-layer;
      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 {
          @include theme-color(border-left-color, stroke, $lighter-grey);
          position: relative;
          box-sizing: border-box;
          border-left-width: 1px;
          border-left-style: solid;
          left: -1px;
        }

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

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

        &.small {
          .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;
            }
          }

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

          .time-panel {
            .panel-content {
              height: 265px;
            }
          }
        }
      }
    }

    .date-panel,
    .month-panel,
    .quarter-panel,
    .year-panel {
      @include theme-color(background-color, stroke, 9);
      @include theme-color(color, stroke, 1);
      position: relative;
      width: $default-width;
    }

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

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

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

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

      &.small {
        .date-panel {
          .grid-cell {
            padding: 2px 0;
          }
        }

        .month-panel {
          .grid-cell {
            height: 55.5px;
            padding: 0;
          }
        }

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

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

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

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

    .year-picker {
      .year-panel {
        position: relative;

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

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

    .quarter-picker {
      .quarter-panel {
        height: 240px;

        .grid-cell {
          height: 47.5px;
        }
      }

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

    .panel__header {
      @include theme-color(border-bottom-color, stroke, $lighter-grey);
      position: relative;
      text-align: center;
      height: 36px;
      line-height: 36px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      box-sizing: border-box;

      .zenticon-right {
        font-size: 10px;
        vertical-align: middle;
      }

      .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 {
      @include theme-color(border-top-color, stroke, $lighter-grey);
      box-sizing: border-box;
      height: 54px;
      line-height: 54px;
      padding-right: 10px;
      text-align: right;
      border-top-width: 1px;
      border-top-style: solid;

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

      .link--current {
        @include theme-color(color, primary, $active);
        cursor: pointer;
      }

      .link--disabled {
        @include theme-color(color, stroke, $disable);
      }

      .error-tips {
        @include theme-color(color, error, $error);
        font-size: $font-size-normal;
      }
    }

    .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;
        text-align: center;
        vertical-align: middle;
        border-radius: 2px;
        cursor: pointer;
        position: relative;
        box-sizing: border-box;

        &:hover {
          @include light-background;
        }

        &--current {
          @include theme-color(color, primary, $active);
          @include theme-color(border-color, primary, $active);
          border-width: 1px;
          border-style: solid;
        }

        &--different {
          @include theme-color(color, stroke, $disable);
          background: none;

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

        &--in-range {
          @include light-background;
          border: 0;
          border-radius: 0;

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

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

        &--in-selected {
          @include light-background;
          border: 0;
          border-radius: 0;

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

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

        &--disabled {
          @include theme-color(color, stroke, $lighter-grey);
          @include theme-color(background-color, stroke, $lighter-grey);
          cursor: not-allowed;
          background: transparent;

          &:hover {
            @include theme-color(background-color, stroke, 9);
          }

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

        &--selected {
          @include theme-color(background-color, primary, $active);
          @include theme-color(color, stroke, 9);

          &:hover {
            @include theme-color(background-color, primary, $active);
          }
        }

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

          &.panel__cell--current:not(.panel__cell--in-range) {
            line-height: 18px;
          }
        }

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

          &.panel__cell--current {
            line-height: 30px;
          }
        }

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

          &.panel__cell--current {
            line-height: 28px;
          }
        }

        &.quarter-panel__cell {
          height: 32px;
          line-height: 32px;
          width: 100%;

          &.panel__cell--current {
            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%;
        }
      }

      .panel-content {
        @include theme-color(background-color, stroke, 9);
        position: absolute;
        top: 0;
        left: 0;
        height: 327px;
        width: $default-width;
      }

      &__preview {
        @include theme-color(border-color, stroke, 4);
        margin: 12px 10px;
        height: 31px;
        line-height: 31px;
        border-width: 1px;
        border-style: solid;
        border-radius: 2px;
        text-align: center;
        display: flex;

        .time__number {
          @include theme-color(border-right-color, stroke, 4);
          flex: 1;
          cursor: pointer;
          border-right-width: 1px;
          border-right-style: solid;

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

    .time-picker-panel {
      &__header {
        height: 50px;
        display: flex;
        align-items: center;
      }

      &__tab-group {
        margin: 12px 60px;
        height: 31px;
        line-height: 31px;
        text-align: center;
        display: flex;
        flex: 1;

        &.show-second {
          margin: 12px 30px;
        }

        .time__number {
          @include theme-color(border-color, stroke, 4);
          flex: 1;
          cursor: pointer;
          border-width: 1px;
          border-style: solid;
          border-right-width: 0;
          user-select: none;

          &:first-child {
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
          }

          &:last-child {
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            border-right-width: 1px;
          }

          &.checked {
            @include theme-color(border-color, primary, $active);
            @include theme-color(color, primary, $active);
            border-width: 1px;
            border-style: solid;
            outline: none;
          }

          &.checked + .time__number {
            border-left-width: 0;
          }
        }
      }

      &__content {
        height: 210px;
        padding: 6px 0;

        .grid-cell {
          padding: 2px 0;
        }
      }

      &__footer {
        .panel__footer {
          border-top: 0;
        }
      }
    }
  }

  .time-picker-input {
    width: 120px;
  }

  .week-picker-input {
    width: 228px;
  }
}