@use '../../../../style/theming';

// MARK: Variables

// MARK: Mixin
@mixin core() {
  .dbx-mat-form-date-time-field-wrapper {
    padding-top: 10px; // padding for label

    > formly-wrapper-mat-form-field > .mat-mdc-form-field > .mat-mdc-text-field-wrapper {
      padding: 0;

      > .mat-mdc-form-field-flex {
        padding-top: 0;
        @include theming.hide-mdc-notched-outline-border;

        > .mdc-notched-outline .mdc-notched-outline__leading {
          width: 9px; // align the field wrapper's title with the first input's title
        }
      }

      > .mat-mdc-form-field-flex > .mat-mdc-form-field-infix {
        padding-bottom: 0;
      }
    }

    .dbx-datetime-row-button.mat-mdc-icon-button.mdc-icon-button {
      margin-left: 2px;
      margin-top: 3px;
    }
  }

  .dbx-datetime-field {
    width: 100%;

    .dbx-datetime-timezone {
      padding: 0 var(--dbx-padding-2);
      pointer-events: none;
    }

    .dbx-datetime-timezone-button .mat-mdc-button {
      font-size: var(--mat-sys-title-medium-size);
    }
  }

  .dbx-datetime-clear-button {
    margin-right: 3px;
  }

  .dbx-datetime-row {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;

    .mat-mdc-form-field-subscript-wrapper {
      // hide the subscript wrapper since it is not used here
      height: 0;
    }
  }

  .add-time-button {
    max-height: 40px;

    &.add-time-button-full {
      width: 100%;
      margin-bottom: var(--dbx-padding-2);
    }
  }

  .add-time-button-wrapper {
    margin: auto;
    margin-bottom: 4px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: left;
  }

  .dbx-fixeddaterange-field {
    .mat-calendar,
    .dbx-fixeddaterange-field-input {
      margin: auto;
      min-width: var(--dbx-fixeddaterange-field-min-width, 240px);
      max-width: var(--dbx-fixeddaterange-field-max-width, 320px);
    }
  }

  .dbx-fixeddaterange-field-full-width .dbx-fixeddaterange-field {
    .mat-calendar,
    .dbx-fixeddaterange-field-input {
      max-width: unset;
    }
  }

  .mat-mdc-form-field.dbx-fixeddaterange-field-input {
    display: block;
  }

  .dbx-fixeddaterange-field-input-end {
    opacity: 0.6;
    pointer-events: none;
  }

  .dbx-form-fixed-date-range-field-wrapper .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
    padding: 4px 0;
  }

  .dbx-form-fixed-date-range-field-wrapper .mat-mdc-form-field-appearance-outline > .mat-mdc-form-field-wrapper > .mat-mdc-form-field-flex > .mat-mdc-form-field-infix {
    padding: 0;
  }

  // affect both the direct button or a child button
  .mat-datepicker-button-highlight .mat-icon-button,
  .mat-datepicker-button-highlight.mat-icon-button {
    background-color: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent);
  }
}

@mixin theme($theme-config) {
}