@import "app-theme";

@import "@material/theme/mixins";
@import "@material/theme/color-palette";
@import "@material/typography/mixins";

.mdc-datepicker-dialog {
  .mdc-dialog__content {
    padding: 0;
  }

  &__calendar {
    padding: 4px 8px;

    &--hidden {
      visibility: hidden;
    }
  }

  &__actions {
    transition: position;

    &--hide {
      position: absolute!important;
      bottom: 0!important;
    }
  }

  &__selection {
    padding: 16px 24px;

    @include mdc-theme-prop(background-color, primary);
    @include mdc-theme-prop(color, on-primary);

    &-year {
      @include mdc-typography(body1);
    }

    &-day {
      @include mdc-typography(headline4);
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    align-items: center;

    &-content {
      flex-grow: 1;
      text-align: center;

      @include mdc-theme-prop(color, text-primary-on-light);
    }

    &-month {
      cursor: pointer;
    }

    &-year {
      cursor: pointer;
    }
  }

  &__prev, &__next {
    @include mdc-theme-prop(color, primary);
  }

  &--disabled {
    .fc-day-number {
      @include mdc-theme-prop (color, $material-color-grey-200, true);
    }

    &.fc-today {
      .fc-day-number {
        @include mdc-theme-prop (color, primary, true);
        opacity: 0.4;
      }
    }
  }

  .fc {
    table {
      width: auto;
    }

    td {
      border: 0;

      .fc-today {
        background-color: unset;

        .fc-day-number {
          @include mdc-theme-prop(color, primary);
        }
      }
    }

    &-scroller {
      //overflow: hidden !important;
    }

    &-day-header {
      @include mdc-theme-prop(color, text-secondary-on-light);
      @include mdc-typography(body2);

      border: 0;
      padding: 4px 0;
    }

    &-row {
      min-height: 0 !important;
      height: 48px;

      &.fc-widget-header {
        height: auto;
      }
    }

    &-day, &-day-top, &-day-header {
      width: 48px;
      border: 0;
    }

    &-other-month {
      .fc-day-number {
        color: white !important;
      }
    }

    &-day-top {
      height: 48px;

      display: inline-flex;
      flex-direction: row;

      align-items: center;
      justify-content: center;
    }

    &-day-number {
      @include mdc-typography(body1);
      @include mdc-theme-prop(color, text-primary-on-light);
    }
  }

  &--selected:not(.fc-other-month) {
    @include mdc-theme-prop (background-color, primary, true);
    border-radius: 50%;

    .fc-day-number {
      @include mdc-theme-prop (color, on-primary, true);
    }
  }

  &__content {
    position: relative;
    overflow: hidden;
  }

  &__monthpicker {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;

    position: absolute;
    left: 0;
    top: 100%;

    z-index: 10;

    @include mdc-theme-prop(background-color, surface);

    transition: top 500ms, display 1ms;

    &--show {
      top: 0;
    }

    &__header {
      display: flex;
      flex-direction: row;
    }

    &__content {
      height: calc(100% - 48px - 16px);
      padding: 0 16px 16px;

      overflow: hidden;
    }

    &__row {
      width: 100%;

      display: flex;
      flex-direction: row;

      height: calc(100% / 4);
    }

    &__month {
      display: flex;
      flex-grow: 1;

      align-items: center;
      justify-content: center;

      &--selected {
        .mdc-datepicker-dialog__monthpicker__month-label {
          @include mdc-theme-prop(color, primary);
        }
      }

      &-label {
        text-transform: uppercase;
        cursor: pointer;
      }
    }
  }

  &__yearpicker {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;

    position: absolute;
    left: 0;
    top: 100%;

    z-index: 10;

    @include mdc-theme-prop(background-color, surface);

    transition: top 500ms, display 1ms;

    &--show {
      top: 0;
    }

    &__header {
      display: flex;
      flex-direction: row;
    }

    &__content {
      height: calc(100% - 48px - 16px);
      padding: 0 16px 16px;

      overflow: hidden;
    }

    &__row {
      width: 100%;

      display: flex;
      flex-direction: row;

      height: calc(100% / 4);
    }

    &__year {
      display: flex;
      flex-grow: 1;

      align-items: center;
      justify-content: center;

      &--selected {
        .mdc-datepicker-dialog__monthyear__year-label {
          @include mdc-theme-prop(color, primary);
        }
      }

      &-label {
        text-transform: uppercase;
        cursor: pointer;
      }
    }
  }
}