.tzolkin {
  &-timepicker,
  &-datepicker,
  &-datetimepicker {
    position: absolute;
    z-index: 1000;
    padding: $half;
    background: $off-white;
    border: 1px solid $light-grey;
  }

  &-datepicker {
    min-width: rem-calc(250);
    padding: $half;
  }

  &-timepicker {
    left: rem-calc(20);
    padding: 0 rem-calc(3);
  }

  &-datetimepicker {
    display: flex;
    display: -ms-flexbox;

    .tzolkin-timepicker {
      position: relative;
      top: initial;
      left: initial;
      background: transparent;
      border: none;
    }
  }

  &-month {
    margin-top: rem-calc(4);
    border: 1px solid #ccc;
  }

  &-selector {
    position: relative;
    margin: 0 $quarter;
    text-align: center;

    a:after {
      font-size: rem-calc(12);
      margin-left: rem-calc(3);
      opacity: 0.5;
    }

    &--month,
    &--year { @extend .tzolkin-selector; }

    &--month { flex: 2; }

    &--year  { flex: 1; }

    &__dropdown {
      position: absolute;
      top: $basic;
      left: 0;
      z-index: 100;
      min-width: rem-calc(65);
      max-height: rem-calc(320);
      overflow-y: auto;
      background: #fff;
      border: 1px solid #eee;
      padding: $quarter;

      li {
        padding: $quarter;
        border-bottom: 1px solid #eee;
        cursor: pointer;

        &.disabled { @include disabled-state; }

        &:last-child { border-bottom: none; }

        &:hover {
          background: rgba($orange, 0.6);
        }
      }
    }
  }
}