@import 'main';

$cell-size: 31px;
$month-title-height: 36px;
$month-width: 7 * $cell-size;
$month-height: 7 * $cell-size + $month-title-height;
$month-margin: 24px;
$month-width-with-margin: $month-width + $month-margin;
$month-height-with-margin: $month-height + $month-margin;
$additional-cell-size: $month-width / 3;
$dropdown-calendar-padding: 16px;
$transition-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

.calendar {
  display: inline-block;
  overflow: hidden;
}

.dropdown-calendar {
  padding: $dropdown-calendar-padding;
  min-width: auto !important;
  top: 100% !important;
  @include border-radius();
  @include flexbox();
  @include align-items(center);
  @include justify-content(center);
  @include flex-direction(column);
}

.calendar-input-active {
  @include box-shadow($box_shadow_paper_hover !important);
}

.arrows-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  @include flexbox();
  @include justify-content(space-between);

  .dropdown-calendar & {
    padding: $dropdown-calendar-padding;
  }
}

.arrow {
  font-size: 24px;
  color: $color_dark;
  cursor: pointer;
  z-index: 1;
}

.month {
  width: #{$month-width + 1};
  height: #{$month-height + 1};

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  &-title {
    @include flexbox();
    @include justify-content(space-between);
    font-weight: 600;
    height: $month-title-height;
    padding-bottom: 16px;
    text-align: center;

    span {
      cursor: pointer;
      margin: auto;
      @include transition();

      &:hover {
        color: $color_primary_deep_dark;
      }
    }
  }

  &-cell {
    width: $cell-size;
    height: $cell-size;
    text-align: center;
    @include no-text-selection()
  }

  .horizontal .visible-months-list & {
    margin-right: $month-margin;

    &:last-child {
      margin-right: 0;
    }
  }

  .vertical .visible-months-list & {
    margin-bottom: $month-margin;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &.disabled:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background-color: rgba($color_paper, 0.6);
  }
}

.months-list, .visible-months-list {
  .horizontal & {
    @include inline-flex();
  }
}

.months-list {
  &.prev, &.next {
    @include manual-transition(left $transition-function, top $transition-function);
  }

  &-box {
    overflow: hidden;
  }

  .horizontal & {
    margin-left: -#{$month-width-with-margin};
    margin-right: -#{$month-width-with-margin - 1};
    left: 0;

    &.prev {
      left: $month-width-with-margin;
    }

    &.next {
      left: -$month-width-with-margin;
    }
  }

  .vertical & {
    margin-top: -$month-height-with-margin;
    margin-bottom: -#{$month-height-with-margin - 1};
    margin-right: 1px;
    top: 0;

    &.prev {
      top: $month-height-with-margin;
    }

    &.next {
      top: -$month-height-with-margin;
    }
  }

}

.visible-months-list {
  .horizontal & {
    margin: 0 $month-margin;
  }

  .vertical & {
    margin: $month-margin 0;
  }
}

.weekday {
  font-size: 12px;
}

.day, .additional-cell {
  background-color: $color_paper;
  border: 1px solid $color_table_border;

  &.active, &.highlighted, &:not(.disabled):hover {
    border: 1px double $color_primary;
    cursor: pointer;
  }

  &.highlighted-state {
    background-color: $color_light;
  }

  &.highlighted {
    background-color: $color_primary;
    color: $color_paper;
  }

  &.active {
    background-color: $color_primary_deep_dark;
    border-color: $color_primary_deep_dark;
    color: $color_paper;
  }

  &.disabled, &.muted {
    color: $color_grey;
  }
}

.table-box {
  overflow: hidden;
  @include transform(scale(1));
  opacity: 1;

  &.increase, &.decrease {
    @include transition(250ms, linear, transform);
    opacity: 0.2;
  }

  &.increase {
    @include transform(scale(1.5));
  }

  &.decrease {
    @include transform(scale(0.5));
  }
}

.additional-table {
  margin-top: -$additional-cell-size;
  margin-bottom: -#{$additional-cell-size - 1};
  top: 0;

  &.top, &.bottom {
    @include transition(250ms, $transition-function, top);
  }

  &.top {
    top: -$additional-cell-size;
  }

  &.bottom {
    top: $additional-cell-size;
  }
}

.additional-cell {
  width: $additional-cell-size;
  height: $additional-cell-size;
  text-align: center;
}

.footer {
  border-top: 1px solid $color_table_border;
  margin: 0 -$dropdown-calendar-padding;
  padding: $dropdown-calendar-padding;
  width: calc(100% + #{$dropdown-calendar-padding * 2});
}