$box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);

.picker-card-styles{
  box-shadow: $box-shadow-lg;
  border: none;
  border-radius: $border-radius-small;
}
.el-picker-panel.time-select.el-popper{
  @extend .picker-card-styles;
}
.el-picker-panel.el-date-picker {
  width: 300px;
  border: 0;
  &.date-picker-primary{
    @include datepicker-colors($primary-color);
    &.el-popper[x-placement^=bottom] .popper__arrow::after {
      border-bottom-color: $primary-color;
    }
    &.el-popper[x-placement^=top] .popper__arrow::after {
      border-top-color: $primary-color;
    }
  }
  @extend .picker-card-styles;
  .el-date-picker__header,
  .el-picker-panel__content {
    margin: 5px;
  }
}

.date-picker-primary .el-date-picker__header,
.date-picker-primary .el-date-range-picker__header {
  &.el-date-picker__header--bordered{
    border: none;
  }
  .el-picker-panel__icon-btn {
    margin-top: 0;
    height: 27px;
    width: 27px;
    color: white;

    &:hover {
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
  .el-date-picker__header-label, div {
    font-size: $font-size-base;
    font-weight: $font-weight-light;
    color: white;
    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: $border-radius-large;
    }
  }
}

.date-picker-primary .el-picker-panel__content {
  .el-date-table th,
  .el-month-table th,
  .el-year-table td {
    color: white;
    font-family: $sans-serif-family;
    font-size: $font-size-base;
    font-weight: $font-weight-light;
    border: none;
  }
}

.date-picker-primary {
  .el-picker-panel__content .el-date-table td,
  .el-picker-panel__content .el-month-table td,
  .el-picker-panel__content .el-year-table td {
    height: 32px;
    width: 32px;
    padding: 0;
    color: white;
    font-family: $sans-serif-family;
    font-size: $font-size-base;
    font-weight: $font-weight-light;

    &.current span,
    &.current a.cell {
      background-color: white;
      color: $primary-color !important;
      box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 50%;
    }

    .cell,
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: $font-size-base;

    }
    span {
      width: 32px;
      height: 32px;
    }
    .cell {
      width: 40px;
      height: 40px;
    }
  }
}
.el-date-picker.date-picker-primary .el-date-picker__time-header{
  border: none;
}

.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100% !important;
}
.el-date-editor.el-input .el-input__inner{
  padding-left: 30px !important
}
.el-date-picker .el-input{
  .el-input__inner{
    @extend .form-control;
  }
}

.el-date-picker.date-picker-primary .el-picker-panel__footer{
  border: none;
  .el-button{
    @extend .btn-primary, .btn-round, .btn-sm;
    border: 0;
    &:first-child{
      @extend .btn-info;
    }
  }
}

.el-picker-panel .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){
  margin-left: 0;
}
