$black: #444;
$black-light: #999;
$black-lighter: #ccc;
$main: #39c086;
$main-hover: #39c086;
$border: #c2ccdc;
$shadow: rgba(0, 0, 0, 0.1);
$base-size: 10px;
$picker-bg: #fff;
$bg: $picker-bg;

@function size($val) {
  @return $val * $base-size;
}

$pseudoSize: size(0.6);
$picker-width: size(30);
$picker-item-line-height: size(3);
$picker-item-selected-before-width: size(4);
$picker-item-selected-before-height: size(2.4);

.datepicker,
.date-range-picker,
.timepicker,
.datetime-picker {
  position: relative;
  font-size: size(1.4);
  color: $black;
  user-select: none;

  /* scrollbar css */
  .scrollbar-wrap {
    .scrollbar {
      width: size(0.4) !important;
      border-radius: size(0.2) !important;
      background: #eee !important;
    }
  }

  /* vue-popper css */
  .vue-popper {
    border-color: rgba($border, 0.5) !important;

    &[x-placement^='bottom'] .arrow {
      border-bottom-color: rgba($border, 0.5) !important;
    }

    &[x-placement^='top'] .arrow {
      border-top-color: rgba($border, 0.5) !important;
    }
  }

  * {
    box-sizing: border-box;
    outline: none !important;
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid $border;
    border-radius: size(0.3);

    &.focus {
      border-color: rgba($main, 0.7);
      box-shadow: 0 0 1px rgba($main, 0.3);
    }

    &.focus,
    &:hover {
      .icon-clear {
        pointer-events: all;
        opacity: 1;
        cursor: pointer;
      }
    }
  }

  .prefix,
  .suffix {
    display: flex;
    align-items: center;
    padding: 0 size(0.5);
  }

  .icon-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1em;
    font-size: 0.8em;
    color: $black-light;
    pointer-events: none;
    opacity: 0;
  }

  .icon-date,
  .icon-time,
  .icon-del {
    width: 1em;
    height: 1em;
  }

  .vue-input {
    display: block;
    height: 100%;
    flex: 1;
    padding: 0;
    border: none;

    &::placeholder {
      color: $black-lighter;
    }

    &.hidden {
      width: 0;
      flex: 0;
    }
  }

  .picker {
    display: block;
    z-index: 10000;
    box-shadow: 0 1px size(1) $shadow;

    .picker-content {
      width: $picker-width;
      padding: size(1);
    }

    .picker-head {
      padding: 0 0 size(1);
      text-align: center;

      .picker-h {
        span {
          font-size: size(1.6);
        }

        .year,
        .month,
        .date {
          cursor: pointer;

          &:hover {
            color: $main-hover;
          }
        }
      }

      .prev,
      .next {
        padding: 0 size(0.5);
        border: none;
        background: transparent;
        cursor: pointer;

        &.disabled {
          color: $black-lighter;
          cursor: default;
        }
      }

      .prev {
        float: left;
      }

      .next {
        float: right;
      }
    }

    .picker-items {
      overflow: hidden;

      .row-item {
        line-height: $picker-item-line-height;
        overflow: hidden;

        &.h {
          border-bottom: 1px solid lighten($border, 15%);

          & .item {
            font-size: size(1.2);
            color: $black-light !important;
          }
        }

        &.line {
          display: block;
          float: left;

          .item {
            width: 100%;
            display: block;
          }
        }

        .item {
          display: inline-block;
          line-height: inherit;
          padding: 0 size(0.8);
          text-align: center;
          cursor: pointer;

          &.date {
            width: calc(100% / 7);
          }

          &.month,
          &.year {
            width: calc(99% / 3);
          }

          &:hover {
            color: $main-hover;
          }

          &.not-in-month,
          &.disabled {
            color: $black-lighter !important;

            &:before {
              content: none !important;
            }
          }

          &.disabled {
            cursor: no-drop !important;
          }

          &.selected,
          &.is-now,
          &.is-in-range {
            position: relative;

            &:before {
              content: '';
              box-sizing: border-box;
              position: absolute;
              left: 50%;
              top: 50%;
              z-index: -1;
              width: 100%;
              max-width: $picker-item-selected-before-width;
              height: $picker-item-selected-before-height;
              border-radius: size(0.3);
              border: 1px solid $main;
              transform: translate(-50%, -50%);
            }
          }

          &.is-now {
            color: $main;

            &:before {
              content: '';
              border: 1px solid rgba($main, 0.2);
              background: none;
            }

            &.disabled {
              opacity: 0.8;
              color: $main !important;

              &:before {
                content: '' !important;
              }
            }
          }

          &.is-in-range {
            &:before {
              max-width: none;
              border-radius: 0;
              border: none;
              background: rgba($main, 0.15);
            }
          }

          &.selected {
            color: #fff;

            &:before {
              max-width: $picker-item-selected-before-width;
              border-radius: size(0.3);
              background: $main;
            }
          }
        }
      }
    }

    .btns {
      padding: size(1) 0 0;
      border-top: 1px solid lighten($border, 15%);
      overflow: hidden;

      .btn {
        float: right;
        padding: 0 size(0.4);
        margin: 0 0 0 size(1);
        font-size: size(1.2);
        color: $main;
        cursor: pointer;
      }
    }
  }

  .range-picker {
    display: flex;
  }
}

.date-range-picker {
  .vue-input {
    text-align: center;
  }
}