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

// MARK: Variables
$dbx-forge-form-field-slider-thumb-margin: 22px;

// MARK: Mixin
@mixin core() {
  // Forge form-field wrapper host: ensure block-level layout. The host element
  // is a custom element (default `inline`); it previously inherited
  // `display: inline-flex` from Material's `.mat-mdc-form-field` rule because
  // the wrapper borrowed that class — that's no longer the case, so make the
  // block layout explicit.
  dbx-forge-form-field-wrapper.dbx-forge-form-field {
    display: block;
  }

  // Restore the 300ms subscript fade animation. Material's base rule
  // `animation: _mat-form-field-subscript-animation 0ms ...` matches
  // `.mat-mdc-form-field-{hint,error}-wrapper` standalone (no parent
  // required), but the duration extension to 300ms is scoped to
  // `.mat-mdc-form-field.mat-form-field-animations-enabled` — which the
  // wrapper no longer has on its host (the `mat-mdc-form-field` class was
  // dropped because it carried Material's typography/layout leak). Mirror
  // the duration rule using our own host class so the subscript still fades
  // over 300ms once Material's stylesheet is loaded.
  .dbx-forge-form-field.mat-form-field-animations-enabled .mat-mdc-form-field-hint-wrapper,
  .dbx-forge-form-field.mat-form-field-animations-enabled .mat-mdc-form-field-error-wrapper {
    animation-duration: 300ms;
  }

  // Forge form-field wrapper: suppress child field label/hint/error inside the wrapper.
  // The wrapper provides its own label (notched outline), hint, and error subscript.
  dbx-forge-form-field-wrapper {
    .slider-label,
    mat-error,
    [matError],
    .mat-hint,
    .df-mat-error,
    .df-mat-hint {
      display: none !important;
    }
  }

  // Slider margin fix for the form-field wrapper (mirrors the formly number slider fix).
  // Adds margin so the slider thumb doesn't overlap the outlined border.
  dbx-forge-form-field-wrapper .mat-mdc-slider {
    margin: $dbx-forge-form-field-slider-thumb-margin $dbx-forge-form-field-slider-thumb-margin 0;
    width: calc(100% - #{$dbx-forge-form-field-slider-thumb-margin * 2}) !important;
  }

  // List selection field inside the form-field wrapper: inset the list from the
  // outlined border on the sides so the card-styled items (12px corner radius)
  // don't clip the rounded outline. The bottom keeps a 1px inset so the scrolled
  // list background doesn't bleed over the lower border, and the top keeps the
  // wrapper's default 16px gap below the notch label. Tune the side inset via
  // --dbx-forge-list-item-field-inline-padding. Uses !important to override the
  // component's scoped inline styles (ViewEncapsulation.Emulated adds attribute
  // selectors that raise specificity above global rules).
  dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(dbx-forge-list-selection-field) {
    padding-left: var(--dbx-forge-list-item-field-inline-padding, var(--dbx-padding-3)) !important;
    padding-right: var(--dbx-forge-list-item-field-inline-padding, var(--dbx-padding-3)) !important;
    padding-bottom: 1px !important;
  }

  // Boolean fields (mat-checkbox / mat-slide-toggle): make the whole content
  // box clickable. Stretches the Material `<label for="...">` to fill the
  // rectangle so native HTML label-click delegation toggles the control on
  // any click in the box. No overlay and no positioning resets, so MDC
  // ripple and focus indicator stay anchored where Material expects.
  //
  // Disabled state already applies `pointer-events: none` on
  // `.dbx-forge-form-field-content` (see formfield.wrapper.component.ts),
  // so disabled clicks remain blocked.
  dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(mat-checkbox),
  dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(mat-slide-toggle) {
    cursor: pointer;

    mat-checkbox,
    mat-slide-toggle {
      display: block;
      width: 100%;
    }

    .mdc-form-field {
      display: flex;
      width: 100%;
      align-items: center;
    }

    // Negative margins cancel the wrapper's 16/16/8 padding so the label's
    // hit-area reaches the outlined edges; matching padding restores visual
    // spacing for the label text itself. Padding-left/inline-start is left
    // alone so Material's gap between the control and the label text is
    // preserved.
    .mdc-form-field > label {
      flex: 1 1 auto;
      align-self: stretch;
      display: flex;
      align-items: center;
      margin: -16px -16px -8px 0;
      padding-top: 16px;
      padding-right: 16px;
      padding-bottom: 8px;
      cursor: pointer;
      min-height: 0;
    }
  }

  // Shared working bar spacing used by both the working field and working wrapper field.
  .dbx-forge-working-bar {
    margin-top: 4px;
  }

  // Flex layout wrapper: ng-forge's GroupFieldComponent applies `display: grid`
  // and `gap: var(--df-grid-row-gap)` via :host styling, and ContainerFieldComponent
  // applies `display: block`. Both are scoped via attribute selectors and tie
  // class-selector specificity, so override with `!important` whenever our
  // `dbx-flex-group` class is present so the flex sizing classes work.
  // The dbx-flex-N children use padding for spacing instead of gap.
  .df-group.dbx-flex-group,
  .df-container.dbx-flex-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0 !important;
  }

  .dbx-form-repeat-array-field {
    // Per-item index number: render it as a compact, centered badge — a circle for a single digit,
    // a pill once it spills to double digits. The chip is a direct child of the field div (placed
    // before the bar so it overlays the top-left corner via `position: absolute`). Size via
    // --dbx-form-repeat-array-index-size.
    > .dbx-chip {
      box-sizing: border-box;
      min-width: var(--dbx-form-repeat-array-index-size, 22px);
      min-height: var(--dbx-form-repeat-array-index-size, 22px);
      padding: 0 6px;
      justify-content: center;
      border-radius: var(--mat-sys-corner-full, 999px);
    }
  }
}

@mixin theme($theme-config) {
  // No theme-specific styles for the wrapper at present.
}