.datepicker {
  $root: &;

  background-color: $color-white;
  border: 1px solid $color-silver-grey;
  border-radius: 2px;
  //display: inline-block;
  vertical-align: top;
  height: 32px;
  position: relative;
  min-width: 200px;
  margin-bottom: 0;

  @include until($bp-medium) {
    display: block;
  }

  &:before {
    background: $color-ghost-white;
    border-right: 1px solid $color-smoke-grey;
    content: "";
    width: 32px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
  }

  &:after {
    @extend %icon-base-styles;
    @include icon-calendar;
    width: 32px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
    line-height: 32px;
    font-size: 17px;
    color: $color-stone-grey;
  }

  &:hover {
    border: $border-form-input-hover;
    box-shadow: $box-shadow-downright;
  }

  &.is-active {
    border: $border-form-input-focus;
    box-shadow: $box-shadow-downright;
  }

  input[type="text"],
  input[type="date"] {
    background: transparent;
    border: none;
    color: $color-graphite-black;
    cursor: pointer;
    font-size: 13px;
    display: block;
    line-height: normal;
    height: 100%;
    outline: none;
    padding: 6px 26px 6px 42px;
    width: 100%;
    z-index: 5;
    position: relative;

    &:focus,
    &:hover {
      outline: none;
      border: none;
    }
  }

  &--disabled {
    background: $color-paper-white;
    border-color: $color-smoke-grey;

    &:hover {
      border-color: $color-smoke-grey;
      box-shadow: none;
    }

    input[type="text"],
    input[type="date"] {
      cursor: not-allowed;
      background: none !important;
    }
  }

  .icon-clear {
    background-color: transparent;
    border: none;
    color: $color-graphite-black;
    line-height: 32px;
    padding: 1px;
    position: absolute;
    outline: none;
    right: 3px;
    top: 0;
    bottom: 0;
    z-index: 6;

    &:before {
      font-size: 20px;
      height: 32px;
      line-height: 28px;
    }

    @include until($bp-medium) {
      display: none;
    }
  }

  &--large {
    height: 40px;

    input[type="text"],
    input[type="date"] {
      font-size: 16px;
    }

    .icon-clear {
      right: 7px;
      line-height: 38px;

      &:before {
        line-height: 38px;
      }
    }
  }

  &.form-item--error {
    box-shadow: 0 0 0 2px $color-telenor-red;

    [type="text"],
    [type="text"]:focus,
    [type="number"],
    [type="number"]:focus,
    [type="date"],
    [type="date"]:focus {
      border-color: transparent !important;
      box-shadow: none;
      padding-right: 42px;
    }

    [class^="icon-"] {
      right: 4px;
      bottom: -2px;
      z-index: 6;
    }

    .icon-clear {
      top: 50%;
      margin-bottom: -13px;
      right: 20px !important;
      color: $color-graphite-black;
    }
  }

  &--range {
    .col:after {
      @extend %icon-base-styles;
    }

    @include until($bp-medium) {
      background-color: none;
      border: 0;
      padding-left: 0;
      margin: 0 -5px;

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

      &:hover,
      &.is-active {
        border: 0;
        box-shadow: none;
      }

      .col {
        position: relative;
        float: left;
        width: 50%;
        padding: 0 5px;

        &:before {
          background: $color-ghost-white;
          border-right: 1px solid $color-smoke-grey;
          content: "";
          width: 32px;
          position: absolute;
          left: 6px;
          top: 1px;
          bottom: 1px;
        }

        &:after {
          @include icon-calendar;
          width: 32px;
          position: absolute;
          left: 6px;
          top: 50%;
          transform: translate(0, -50%);
          text-align: center;
          line-height: 32px;
          font-size: 17px;
          color: $color-stone-grey;
        }
      }

      input[type="text"],
      input[type="date"] {
        color: $color-graphite-black;
        font-size: 13px;
        line-height: 18px;
        display: block;
        height: 32px;
        outline: none;
        padding: 7px 26px 7px 38px;
        width: 100%;
        border: 1px solid $color-silver-grey;
        border-radius: 2px;

        &:focus,
        &:hover {
          border: 1px solid $color-silver-grey;
        }
      }

      &.form-item--error {
        box-shadow: none;

        [type="text"],
        [type="text"]:focus,
        [type="number"],
        [type="number"]:focus,
        [type="date"],
        [type="date"]:focus {
          border-color: transparent !important;
          box-shadow: 0 0 0 2px $color-telenor-red;
        }

        [class^="icon-"] {
          right: 9px;
        }
      }
    }
  }

  &.disabled {
    &:before,
    &:after {
      z-index: 6;
    }
  }
}

.datepicker {
  $root: &;

  &__start,
  &__end {
    display: none !important;

    @include until($bp-medium) {
      #{$root}--range & {
        display: block !important;
      }
    }
  }

  &__range {
    @include until($bp-medium) {
      display: none !important;
    }
  }
}

.datepick {
  $root: &;
  @extend %text-size--13;
  background-color: $color-white;
  box-shadow: 0 0 6px rgba(0, 0, 0, .07);
  color: $color-graphite-black;
  border: 1px solid $color-silver-grey;
  border-radius: 2px;
  position: relative;
  margin-top: $xsmall-spacing-unit + 1;

  &:before {
    @include tn-triangle(9px, $color-silver-grey, bottom);
    left: 15px;

    #{$root}--position-left & {
      left: auto;
      right: 15px;
    }
  }

  &:after {
    @include tn-triangle(7px, $color-white, bottom);
    left: 15px;

    #{$root}--position-left & {
      left: auto;
      right: 17px;
    }
  }

  a {
    color: $color-graphite-black;
    text-decoration: none;

    &.datepick-disabled {
      color: $color-steel-grey;
      cursor: auto;
      background-color: $color-white;
      opacity: .5;
    }
  }

  .date-picker__header-label {
    padding: 0 5px;
    &:hover {
      color: #038cd6
    }
  }

  .datepick-sidebar {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: 0;
    width: 200px;
    margin-right: -200px;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    padding: 10px;
    border-left: none;
    & > button {
      margin-bottom: 10px;
    }
  }
  .datepick-ctrl {
    text-align: right;
    .button--micro.icon.calendar-ok-btn {
      color: #fff;
      margin: 0;
      width: 32px;
      &[disabled] {
        color: #b8b8b8 !important;
      }
    }

    .datepick-time-label {
      color: #038cd6;
      margin-right: 10px;
      vertical-align: bottom;
      cursor: pointer;
      &[disabled] {
        color: #b8b8b8 !important;
      }
    }
  }
  [disabled] {
    cursor: not-allowed;
  }
  .datepick-month {
    table {
      td {
        width: 33px;
        height: 32px;
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        .datepick-other-month {
          display: inline-block;
          cursor: pointer;
        }
        & > a {
          padding: 0;
          height: 100%;
          line-height: 33px;
          border: 1px solid #fff;
          &.datepick-today {
            border: 1px solid #038cd6;
            color: #038cd6;
          }
          &.datepick-selected {
            background-color: #038cd6;
            border: 1px solid #038cd6;
            color: #fff;
          }
          &.datepick-disabled {
            cursor: not-allowed;
          }
          &:not(.datepick-today):not(.datepick-selected):not(.datepick-disabled):hover {
            background-color: #f5f5f5;
            border: 1px solid #f5f5f5;
          }
        }
      }
    }

    .month-table {
      td {
        text-align: center;
        cursor: pointer;
        padding: 10px 3px;
        &>a {
          width: 48px;
          height: 32px;
          display: block;
          line-height: 32px;
          padding: 0;
          &:not(.datepick-selected):hover {
            background-color: #f5f5f5;
          }
        }
      }
    }
    .year-table {
      td {
        text-align: center;
        cursor: pointer;
        padding: 10px 3px;

        &>a{
          width: 48px;
          height: 32px;
          display: block;
          line-height: 32px;
          padding: 0;

          &:not(.datepick-selected):hover {
            background-color: #f5f5f5;
          }
        }
      }
    }

    .time-spinner {
      .time-spinner-select {
        float: left;
        font-size: 12px;
        border: 1px solid #e9e9e9;
        border-width: 0 1px;
        margin-left: -1px;
        box-sizing: border-box;
        width: 33.6%;
        position: relative;
        overflow: hidden;

        ul {
          list-style: none;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          width: 100%;
          width: -moz-calc(100% + 20px);
          width: -webkit-calc(100% + 20px);
          width: calc(100% + 20px);
          max-height: 236px;
          overflow-y: auto;
        }
        li {
          list-style: none;
          box-sizing: content-box;
          margin: 0;
          height: 34px;
          line-height: 34px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-transition: background 0.3s ease;
          transition: background 0.3s ease;
          width: 100%;

          &:hover {
            background: #f5f5f5;
          }
          &.datepick-selected{
            background-color: #038cd6;
            color: #fff;
          }
          &.blank {
            background: #fff;
            cursor: auto;
          }
        }

        &:after {
          height: 28px;
          background-color: #fff;
          opacity: 0.7;
          filter: alpha(opacity=70);
          /* box-shadow: 10px 1px 3px rgba(0,0,0,0.5); */
          content: "   ";
          width: 100%;
          position: absolute;
          left: 0;
          right: 0;
          z-index: 10;
          bottom: 0;
          background: -webkit-linear-gradient(#fff, #f5f5f5); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(#fff, #f5f5f5); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(#fff, #f5f5f5); /* Firefox 3.6 - 15 */
          background: linear-gradient(#fff, #f5f5f5); /* 标准的语法（必须放在最后） */
        }

        :before {
          height: 28px;
          background-color: #fff;
          opacity: 0.7;
          filter: alpha(opacity=70);
          content: "   ";
          width: 100%;
          position: absolute;
          left: 0;
          right: 0;
          z-index: 10;
          top: 0;
          background: -webkit-linear-gradient(#f5f5f5, #fff); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(#f5f5f5, #fff); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(#f5f5f5, #fff); /* Firefox 3.6 - 15 */
          background: linear-gradient(#f5f5f5, #fff); /* 标准的语法（必须放在最后） */
        }
        .blank {
          height: 178px;
        }
      }
    }
  }

}

.datepick-popup {
  @include zindex(popup);
}

.datepick-disable {
  position: absolute;
  z-index: 100;
  background-color: $color-white;
  opacity: .5;
}

.datepick-nav {
  border-bottom: 1px solid $color-silver-grey;
  font-size: 16px;
  font-weight: normal;
  overflow: hidden;
  width: 100%;
  text-align: center;
  background-color: $color-paper-white;
  box-shadow: $box-shadow-bubble;
  @include gradient-vertical($start-color: #fff, $end-color: #f5f5f5);

  a {
    padding: 12px 10px;
  }
}

.datepick-ctrl {
  background-color: $color-paper-white;
  border-top: 1px solid $color-silver-grey;
  clear: both;
  //display: none;
  padding: 10px;

  button {
    width: 100%;
  }
}

.datepick-cmd-clear {
  display: none;
}

.datepick-cmd-prevJump,
.datepick-cmd-nextJump {
  width: 8%;
}

.datepick-cmd {
  text-align: center;
}

.datepick-cmd-prevJump,
.datepick-cmd-clear {
  float: left;
  padding-left: 2%;
}

.datepick-cmd-current,
.datepick-cmd-today {
  display: block;
  text-align: center;
}

.datepick-cmd-nextJump,
.datepick-cmd-close {
  float: right;
  padding-right: 2%;
  text-align: right;
}

.datepick-cmd-close {
  display: block;
  position: relative;
  text-align: left;
  text-indent: -999em;
  z-index: 2;

  &:before {
    @extend %icon-base-styles;
    @include icon-close-cross;
    position: absolute;
    right: 10px;
    font-size: 14px;
    line-height: 18px;
    text-indent: 0;
    font-weight: bold;
  }
}

.datepick-month-nav {
  float: left;
  text-align: center;

  div {
    float: left;
    width: 12.5%;
    margin: 1%;
    padding: 1%;
  }
}

.noPrevNext .datepick-cmd.datepick-disabled {
  visibility: hidden;
}

.datepick-month-row,
.datepick-time-row {
  clear: left;
}

.datepick-month,
.datepick-time {
  float: left;
  padding: 0 10px 10px;
  width: 255px;
  text-align: center;

  &.first {
    border-right: 1px solid $color-silver-grey;
  }

  &.last {
    border-left: 1px solid $color-silver-grey;
    margin-left: -1px;
  }

  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;

    td {

      a {
        color: $color-graphite-black;
        display: block;
        /*max-width: 28px;
        max-height: 28px;*/
        padding: 4px 0;
        text-decoration: none;
        width: 100%;
      }

      span {
        color: $color-steel-grey;
        display: block;
        max-width: 28px;
        max-height: 28px;
        width: 100%;
        padding: 4px 0;
      }

      .datepick-other-month {
        color: $color-steel-grey;
        display: none;
      }

      .datepick-today {
        border: 1px solid $color-telenor-blue;
        color: $color-telenor-blue;
        padding: 3px 0;
      }

      .datepick-highlight {
        background-color: $color-smoke-grey;
      }

      .datepick-selected {
        background-color: $color-telenor-blue;
        /*border: none;*/
        color: $color-white;
      }

      &.datepick-selected:first-child a {
        border-radius: 5px 0 0 5px;
      }

      &.datepick-selected:last-child a {
        border-radius: 0 5px 5px 0;
      }
    }
  }
}

.datepick-month {
  padding-bottom: 15px;
}

.datepick-month-header {
  border-bottom: 1px solid $color-silver-grey;
  padding: 1em 0;
  margin-bottom: 1em;
  position: relative;

  input {
    position: absolute;
    display: none;
  }
}

.datepick-cmd-prev,
.datepick-cmd-next {
  border: 1px solid $color-silver-grey;
  border-radius: $radius-button;
  background-clip: padding-box;
  background-color: $color-white;
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  overflow: hidden;
  white-space: nowrap;

  &:before {
    @extend %icon-base-styles;
    height: 24px;
    width: 24px;
    line-height: 22px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    font-size: 12px;
  }
}

.datepick-cmd-prev {
  left: 0;
  text-indent: -999px;

  &:before {
    @include icon-arrow-prev;
    text-indent: -3px;
  }
}

.datepick-cmd-next {
  right: 0;
  text-indent: 999px;

  &:before {
    @include icon-arrow-next;
    text-indent: 0;
  }
}

.datepick-month-header select,
.datepick-month-header input {
  height: 1.4em;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%;
}

.datepick-month th,
.datepick-month td {
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: center;
}

.datepick-month th,
.datepick-month th a {
  color: $color-telenor-blue;
  padding: 4px 0;
}

.datepick-status {
  clear: both;
  background-color: $color-silver-grey;
  text-align: center;
}

.datepick-clear-fix {
  clear: both;
}

.datepick-time-row {
  border-top: 1px solid $color-silver-grey;
}

.datepick-time {
  &.first {
    border-right: none;
  }

  &.last {
    border-left: none;
  }
}

.datepick-time-content {
  padding-top: 10px;
}

.datepick-time .form-item--inline {
  margin: 0 0 0 10px !important;
  float: left;
}

.datepick-time .form-item--inline:first-child {
  margin-left: 0 !important;
}

/*动画*/
.flipY-enter-active {
  animation: flipInY  .75s;
}
.flipY-leave-active {
  animation: flipOutY .75s;
}
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
    transform: perspective(400px) rotate3d(0,1,0,-15deg);
    opacity: 1
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    opacity: 0
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
    transform: perspective(400px) rotate3d(0,1,0,-15deg);
    opacity: 1
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    opacity: 0
  }
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
    transform: perspective(400px) rotate3d(0,1,0,-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
    transform: perspective(400px) rotate3d(0,1,0,10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
    transform: perspective(400px) rotate3d(0,1,0,-5deg)
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
    transform: perspective(400px) rotate3d(0,1,0,90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
    transform: perspective(400px) rotate3d(0,1,0,-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
    transform: perspective(400px) rotate3d(0,1,0,10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
    transform: perspective(400px) rotate3d(0,1,0,-5deg)
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}