@use 'sass:map';
@use '../base/colors';
@use '../base/opacity';
@use '../base/elevation';
@use '../base/typography';

@mixin mx-datepicker-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;

    mat-datepicker-content.mat-datepicker-content {
      @extend .gl-dark-el-2;
    }
  } @else {
    mat-datepicker-content.mat-datepicker-content {
      @extend .gl-el-2;
    }
  }

  .mat-datepicker-toggle.mat-datepicker-toggle-active {
    button.mat-mdc-icon-button:not(:disabled) {
      color: map.get($color-theme, primary);
    }
  }
  /* datepicker panel */
  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: rgba(map.get($color-theme, primary), opacity.$opacity-8);
  }
  mat-datepicker-content.mat-datepicker-content {
    background-color: map.get($color-theme, surfaceContainer);
  }
  .mdc-button__label .mat-calendar-arrow {
    fill: map.get($color-theme, primary);
  }
  .mat-calendar-table-header {
    color: map.get($color-theme, onSurfaceVariant);
  }
  .mat-calendar-table-header-divider::after {
    background-color: map.get($color-theme, outlineVariant);
  }
  .mat-calendar-body-label {
    color: map.get($color-theme, onSurfaceVariant);
  }
}

.mat-form-field-disabled .mat-datepicker-toggle {
  opacity: opacity.$opacity-38;
}

/* datepicker panel */
mat-datepicker-content.mat-datepicker-content {
  .mat-calendar {
    height: auto;
  }
}

mat-calendar-header {
  .mat-calendar-header {
    padding: 0;
  }
  .mat-calendar-controls {
    margin: 16px 0;
  }
}

.mdc-button__label {
  span {
    margin-right: 10px;
  }
  .mat-calendar-arrow {
    width: 7.5px;
    height: 3.75px;
  }
}

.mat-calendar-table-header th {
  @extend .gl-body-sm;
}

.mat-calendar-body-label {
  @extend .gl-title-sm;
}

.mat-calendar-body-cell-content {
  font-size: 13px;
}