.rtl {
  direction: rtl;
}
.vdp-datepicker {
  position: relative;

  text-align: left;
  * {
    box-sizing: border-box;
  }
}

.vdp-datepicker__calendar {
  position: absolute;
  z-index: 100;

  width: 300px;

  border: 1px solid #ccc;
  background: white;
  header {
    display: flex;

    line-height: 40px;
    span {
      display: inline-block;
      float: left;

      width: percentage(5 / 7);

      text-align: center;
    }

    .prev,
    .next {
      position: relative;

      float: left;
      display: flex;
      justify-content: center;
      align-items: center;

      width: percentage(1 / 7);

      svg {
        height: 12px;
        stroke: #000;
      }

      &.disabled svg {
        stroke: #ddd;
      }
    }

    .prev:not(.disabled),
    .next:not(.disabled),
    .up:not(.disabled) {
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }

  .disabled {
    cursor: default;

    color: #ddd;
  }
  .flex-rtl {
    display: flex;
    flex-wrap: wrap;

    width: inherit;
  }

  .cell {
    display: inline-block;

    width: percentage(1 / 7);
    height: 40px;
    padding: 0 5px;

    text-align: center;
    vertical-align: middle;

    border: 1px solid transparent;

    line-height: 40px;
    &:not(.blank):not(.disabled).day,
    &:not(.blank):not(.disabled).month,
    &:not(.blank):not(.disabled).year {
      cursor: pointer;
      &:hover {
        border: 1px solid #4bd;
      }
    }
    &.selected {
      background: #4bd;
      &:hover {
        background: #4bd;
      }
      &.highlighted {
        background: #4bd;
      }
    }
    &.highlighted {
      background: #cae5ed;
      &.disabled {
        color: #a3a3a3;
      }
    }
    &.grey {
      color: #888;

      &:hover {
        background: inherit;
      }
    }
    &.day-header {
      cursor: inherit;
      white-space: nowrap;

      font-size: 75%;
      &:hover {
        background: inherit;
      }
    }
  }

  .month,
  .year {
    width: percentage(1 / 3);
  }
}

.vdp-datepicker__clear-button,
.vdp-datepicker__calendar-button {
  cursor: pointer;

  font-style: normal;
  &.disabled {
    cursor: default;

    color: #999;
  }
}