@use './mixins' as mix;

.mat-date-range-input-container {
  font-size: 14px;

  @include mix.tablet {
    font-size: 15px;
  }
}

.mat-datepicker-content {
  margin-top: 10px;
}

.mat-date-range-input {
  border: 1px solid transparent;
  line-height: 20px;
  height: 20px;
  font-size: 14px;
  box-sizing: border-box;
  @include mix.tablet {
    line-height: 22px;
    font-size: 15px;
    height: 22px;
  }

  .mat-date-range-input-separator {
    color: var(--font-color);
  }
}

.mat-datepicker-toggle {
  transform: translateX(10px);

  .mat-mdc-icon-button.mat-mdc-button-base {
    background: transparent;
    color: var(--label-font-color--light);
  }
}

.mat-datepicker-popup {
  .mat-datepicker-content {
    background-color: var(--select-option-color);
    border-color: var(--select-options-border-color);
    border-width: 1px;
    border-style: solid;

    .mat-calendar-table-header, .mat-calendar-body-label {
      color: var(--label-font-color);
    }

    .mat-calendar-body-cell-content,
    .mat-date-range-input-separator,
    .mat-calendar-next-button,
    .mat-calendar-previous-button {
      color: var(--font-color);
    }

    .mat-calendar-body-selected {
      color: white;
    }
  }

  .mat-calendar-period-button, .mat-icon-button {
    background: var(--btn-secondary-color);
    color: var(--font-color);

    .mat-calendar-arrow {
      fill: var(--font-color);
    }

    &::after {
      border-color: var(--font-color);
    }
  }
}

.mat-calendar-body-in-preview {
  color: var(--label-font-color);
}

.mat-calendar-body-today {
  border-color: var(--label-font-color) !important;
}

.mat-calendar-header {
  padding: var(--mat-calendar-header-padding, 8px 8px 0 8px) !important;
}