/*
* MF Datepicker
*/

$rd-datepicker-bg: $input-color;
$rd-dp-item-today-bg: $input-background;
$rd-dp-item-selected-bg: $brand-primary;

.rd-datepicker {
         background: $rd-datepicker-bg;
         color: $input-background;
         border-radius: $border-radius-large;
         border: 1px solid $rd-datepicker-bg;
       }

.dp-item {
         border-radius: 50%;
       }

.dp-item-hover {
         color: $rd-datepicker-bg;
         background: $rd-dp-item-today-bg;
       }

.dp-item-offset {
         color: #c6bbba;
       }

.dp-item-today {
         color: $rd-datepicker-bg;
         background: $rd-dp-item-today-bg;
       }

.dp-item-selected {
         color: $white-clr;
         background: $rd-dp-item-selected-bg;
       }

.mfDatePicker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 15px;
  padding: 10px 15px;
  opacity: 0;
  z-index: 1;
  visibility: hidden;
  box-shadow: $box-shadow-ambient, $box-shadow-key-light;
  transition: .3s all ease-in-out;
@include transform(translateY(20px));
.rd-datepicker;
  &:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 15px;
  @include triangle(top, 12px, 6px, $rd-datepicker-bg);
  }

  table {
    text-align: center;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 12px;

    th {
      font-weight: 700;
      text-transform: uppercase;
      font-size: 14px;
    }

    td {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      transition: .3s all ease;

    .dp-item;
      &:hover {
      .dp-item-hover;
      }

      &.dp-offset {
      .dp-item-offset;
      }

      &.dp-today {
      .dp-item-today;
      }

      &.dp-selected {
      .dp-item-selected;
      }
    }
  }

  &_title{
    font-size: 16px;
    line-height: 30px;
  }

  &_next, &_prev {
    font: 400 22px $fa;
    line-height: inherit;
    text-align: center;
    color: $rd-dp-item-today-bg;
    cursor: pointer;

    &:hover {
      color: $rd-dp-item-selected-bg;
    }
  }

  &_panel {
    text-align: center;
    padding: 0 2px;
    line-height: 30px;
  }

  &_next {
    float: right;

    &:before {
      content: '\f105';
    }
  }

  &_prev {
    float: left;

    &:before {
      content: '\f104';
    }
  }

  &_panel + table {
    margin-top: 5px;
  }

  &.open {
    @include transform(translateY(0));
    opacity: 1;
    visibility: visible;
  }
}