.mc-datepicker{
  position:relative;
  width: 160px;
  display: inline-block;
  &+&{
    margin-left: 10px;
  }
  &.is-range{
    width: 220px;
  }
  &.is-disabled{
    .mc-input_inner{
      border: 1px solid $disable-line;
      background-color: $disable-bg;
      color: $disable-color;
      &:hover,&:focus{
        border-color:$disable-line;
        ~.mc-input_icon{
          color: $disable-color;
        }
      }
      ~.mc-input_icon{
        color: $disable-color;
      }
    }
  }
  &:hover{
    .mc-icon-close{
      display: block;
      z-index: 2;
    }
  }
  .mc-input_inner{
    @include radius;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border: 1px solid $line;
    box-sizing: border-box;
    color: $gray;
    display: block;
    height: $height-m;
    font-size: 14px;
    line-height: 1;
    outline: none;
    padding: 3px 10px;
    width: 100%;
    &:hover,&:focus{
      border-color:$blue;
      ~.mc-input_icon{
        color: $blue;
      }
    }
  }
  .mc-input_icon{
    font-size: 16px;
    position: absolute;
    top: 10px;
    right: 8px;
    cursor :pointer;
    font-style :normal;
    color: $icon;
  }
  .mc-icon-date{
    pointer-events: none;
  }
  .mc-icon-close{
    font-size: 14px;
    display: none;
    background-color: #fff;
    width: 20px;
    height: 23px;
    text-align: center;
    line-height: 23px;
    &:hover{
      color: $blue;
    }
  }
  .mc-datepicker_calendar{
    @include radius;
    position:absolute;
    z-index :100;
    background: #fff;
    width :280px;
    border :1px solid $line;
    padding: 5px 10px 15px;
    .mc-datepicker_header{
      @extend %clear;
      display:block;
      line-height:39px;
      span{
        @include float;
        text-align :center;
        width:200px;
      }
      .prev,
      .next{
        @include float;
        width :40px;
        position :relative; 
        cursor: pointer;
        &:hover{
          cursor :pointer;
          &:hover{
            color: $blue;
            background: #eee;
          }
        }
        &.is-disabled{
          color: $disable-color;
          cursor: not-allowed;
          &:hover{
            color: $disable-color;
            background: transparent;
          }
        }
      }
      .prev{
        &.disabled:after{
          color: $disable-color;
          cursor: not-allowed;
        }
      }
      .next{
        &.disabled:after{
          color: $disable-color;
          cursor: not-allowed;
        } 
      }
      .up{
        font-size: 18px;
        i:hover{
          color: $blue;
          cursor: pointer;
        }
      }
    }
  }
  .mc-datepicker_yearList{
    li{
      @extend %transition-all;
      @include float;
      @include radius;
      cursor: pointer;
      text-align: center;
      font-size: 16px;
      width: 33.3%;
      padding: 10px 0;
      &:hover{
        background: $l-blue;
        color: #fff;
      }
      &.selected{
        background: $blue;
        color: #fff;
      }
      &.invalid{
        @include opacity;
        &:hover{
          cursor: not-allowed;
          background: transparent;
          color: $gray;
        }
      }
    }
  }
  .mc-datepicker_monthList{
    li{
      @extend %transition-all;
      @include float;
      @include radius;
      cursor: pointer;
      text-align: center;
      font-size: 16px;
      width: 33.3%;
      padding: 10px 0;
      &:hover{
        background: $l-blue;
        color: #fff;
      }
      &.selected{
        background: $blue;
        color: #fff;
      }
      &.invalid{
        @include opacity;
        &:hover{
          cursor: not-allowed;
          background: transparent;
          color: $gray;
        }
      }
    }
  }
  .mc-datepicker_dateList{
    .weeks{
      th{
        width: 40px;
        height: 40px;
        font-weight: normal;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
      }
    }
    .date{
      td{
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        &.preMonth,&.nextMonth{
          span{
            @include opacity;
          }
          &.invalid{
            span{
              &:hover{
                background: transparent;
                color: $gray;
              }
            }
          }
          &.is-disabled{
            span{
              @include opacity;
              color :$disable-color;
              cursor: not-allowed;
              background:$disable-bg;
              &:hover{
                color :$disable-color;
                background:$disable-bg;
              }
            }
          }
          &:hover{
            // @include opacity(100);
          }
          .selected{
            @include opacity(100);
            background: $blue;
            color: #fff;
            &:hover{
              background: $l-blue;
              color: #fff;
            }
          }
        }
        &.is-disabled{
          span{
            @include opacity;
            color :$disable-color;
            cursor: not-allowed;
            background:$disable-bg;
            &:hover{
              color :$disable-color;
              background:$disable-bg;
            }
          }
        }
        &.firstItem,&.lastItem{
          background:#f7f7f7;
        }
        span{
          @extend %transition-all;
          cursor: pointer;
          display: block;
          margin: 0 auto;
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 15px;
          &.selected{
            background: $blue;
            color: #fff;
          }
          &:hover{
            background: $l-blue;
            color: #fff;
            border-radius: 15px;
          }
        }
      }
    }
  }

}
.is-week{
  .mc-datepicker_dateList{
    tbody{
      tr:hover{
        span{
          background-color: $blue;
          color: #fff;
        }
      }
    }
  }
}