@import "../../styles/settings/settings.colors";
@import "../../styles/tools/tools.all";

.mat-form-field.date-picker {
  $date-picker-height: $form-field-height;
  $date-picker-margin-button: $form-field-margin-button;
  $date-picker-input-height: 2.25rem;

  overflow: hidden;
  height: $date-picker-height;
  border-bottom: $date-picker-margin-button;
  line-height: unset;
  transform: translateY(0);

  .mat-form-field-wrapper {
    margin-top: 0 !important;
    transform: translateY(-0.375rem);
  }

  .mat-form-field-flex {
    padding-right: 0 !important;
    margin-top: 0;

    &::after {
      display: none;
    }
  }

  .mat-form-field-infix {
    height: 2.5rem;
    padding: 0.563rem 0;
    /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
    border: none !important;
    border-top-width: 0.25rem;
    margin: 0;
    line-height: unset !important;
  }

  .mat-input-element {
    position: relative;
    top: -0.5rem;
    height: auto;
    padding-right: 2.25rem;
    margin: 0.25rem 0 0.0625rem 0.0625rem;
    line-height: unset !important;
    transform: translateY(0.5625rem);
  }

  &:active,
  &:focus,
  &:hover {
    .mat-input-element {
      color: $licorice;
    }
  }

  input {
    margin-top: 0;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: $date-picker-input-height;

    &::placeholder {
      color: $licorice !important;
      line-height: 2.125rem !important;
    }
  }

  .mat-form-field-label-wrapper {
    top: 0;
    overflow: unset;
    height: 1rem;
    padding-top: 0;
    transform: translateY(0.125rem);

    .mat-form-field-label {
      top: -0.9375rem;
      width: auto;
      height: 1rem;
      font-size: 0.75rem;
      font-weight: 500;
      transform: none;

      // mat-form-field-label
    }
  }

  .mat-form-field-suffix {
    position: static !important;
    top: unset !important;
    transform: initial !important;
  }

  .mat-datepicker-toggle {
    position: static;
    top: unset;
    display: block;
  }

  .mat-button-wrapper {
    display: flex;
    align-items: center;
  }

  .mat-icon-button {
    position: absolute;
    top: 0.3125rem;
    right: 0;
    width: 2.25rem !important;
    height: 2.125rem !important;
    align-items: unset !important;
    border: none;

    svg {
      width: 1.25rem;
      height: 1.25rem;
      font-size: 0.9375rem;

      path {
        // TODO: delete after Icon refactoring
        fill: transparent !important;
      }
    }

    &:active,
    &:focus,
    &:hover {
      border: none;
    }
  }

  &.ng-invalid:not(.ng-untouched) {
    .qd-icon {
      color: $error-default;
    }

    .mat-input-element::placeholder {
      color: $error-default !important;
    }
  }

  .mat-form-field-hint-wrapper {
    overflow: visible;
    transform: translateY(0.09375rem) !important;
  }

  .mat-hint {
    height: 1.5rem;
  }
}

.mat-datepicker-content {
  border-radius: 0 !important;
}

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background-color: $distance;
}

button.mat-button-base:not(.mat-flat-button) {
  color: $licorice !important;
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: $licorice;
}

.mat-calendar-table-header {
  color: $ash;
}

.mat-calendar-table-header-divider::after {
  background: $light-gray;
}

.mat-calendar-body-cell-content {
  border-color: transparent;
  color: $licorice;
}

.mat-calendar-body-selected {
  background-color: $cerulean;
  color: $white !important;
}

.mat-calendar-previous-button::after,
.mat-calendar-next-button::after {
  top: -0.4375rem !important;
  width: 0.4375rem;
  height: 0.4375rem;
  border-top-width: 0.0625rem;
  border-left-width: 0.0625rem;
}

.mat-calendar-previous-button::after {
  transform: translateX(0.125rem) rotate(-45deg);
}

.mat-calendar-next-button::after {
  transform: translateX(-0.125rem) rotate(45deg);
}
