@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./checkbox.common";

// Ionic Checkbox
// --------------------------------------------------

:host {
  /**
   * @prop --checkmark-height: Stroke height of the checkbox checkmark
   *
   * @prop --focus-ring-color: Color of the focus ring
   * @prop --focus-ring-width: Width of the focus ring
   * @prop --focus-ring-offset: Offset of the focus ring
   */

  // Border
  --border-width: #{globals.$ion-border-size-025};
  --border-style: #{globals.$ion-border-style-solid};
  --border-color: #{globals.$ion-primitives-neutral-800};
  --checkmark-width: #{globals.$ion-scale-400};
  --checkmark-height: var(--checkmark-width);

  // Focus
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};
  --focus-ring-offset: #{globals.$ion-space-050};

  // Size
  --size: #{globals.$ion-scale-600};
  --checkbox-background: #{globals.$ion-bg-input-default};
  --checkbox-background-checked: #{globals.$ion-bg-primary-base-default};
  --border-color-checked: #{globals.$ion-semantics-primary-base};
  --checkmark-color: #{globals.$ion-bg-surface-default};
  --transition: none;

  z-index: 2;

  // Checkbox Target area
  // --------------------------------------------------
  &::after {
    @include globals.position(50%, 0, null, 0);

    position: absolute;

    height: 100%;
    min-height: globals.$ion-scale-1200;

    transform: translateY(-50%);

    content: "";

    cursor: pointer;

    z-index: 1;
  }

  .native-wrapper {
    position: relative;
  }
}

.label-text-wrapper {
  color: globals.$ion-text-default;
}

:host(.in-item) .label-text-wrapper {
  @include globals.margin(globals.$ion-space-250, null, globals.$ion-space-250, null);
}

:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
  @include globals.margin(globals.$ion-space-250, null, globals.$ion-space-400, null);
}

:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
  @include globals.margin(null, null, globals.$ion-space-250, null);
}

input {
  @include globals.visually-hidden();
}

.native-wrapper {
  @include globals.border-radius(var(--border-radius));

  flex-shrink: 0;

  justify-content: center;

  width: var(--size);
  height: var(--size);

  transition: var(--transition);

  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);

  background: var(--checkbox-background);

  box-sizing: border-box;
}

.checkbox-icon {
  width: var(--checkmark-width);
  height: var(--checkmark-height);
}

.checkbox-icon path {
  fill: var(--checkmark-color);
}

// Checkbox Hint Text
// ----------------------------------------------------------------

.checkbox-bottom {
  @include globals.typography(globals.$ion-body-sm-medium);
}

.checkbox-bottom .error-text {
  color: globals.$ion-text-danger;
}

.checkbox-bottom .helper-text {
  color: globals.$ion-text-subtlest;
}

// Label Placement - Start
// ----------------------------------------------------------------

:host(.checkbox-label-placement-start) .label-text-wrapper {
  /**
   * The margin between the label and
   * the checkbox should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(null, globals.$ion-space-400, null, 0);
}

// Label Placement - End
// ----------------------------------------------------------------

/**
 * The margin between the label and
 * the checkbox should be on the start
 * when the label sits at the end.
 */
:host(.checkbox-label-placement-end) .label-text-wrapper {
  @include globals.margin(null, 0, null, globals.$ion-space-400);
}

// Label Placement - Fixed
// ----------------------------------------------------------------

:host(.checkbox-label-placement-fixed) .label-text-wrapper {
  /**
   * The margin between the label and
   * the checkbox should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(null, globals.$ion-space-400, null, 0);
}

// Label Placement - Stacked
// ----------------------------------------------------------------

:host(.checkbox-label-placement-stacked) .label-text-wrapper {
  @include globals.transform(scale(0.75));

  /**
   * The margin between the label and
   * the checkbox should be on the bottom
   * when the label sits at the top.
   */
  @include globals.margin(null, 0, globals.$ion-space-400, 0);

  /**
   * Label text should not extend
   * beyond the bounds of the checkbox.
   */
  max-width: calc(100% / 0.75);
}

// Ionic Design Checkbox Sizes
// --------------------------------------------------
:host(.checkbox-size-small) {
  --size: #{globals.$ion-scale-400};
}

// Checked / Indeterminate Checkbox
// ---------------------------------------------
:host(.checkbox-checked) .native-wrapper,
:host(.checkbox-indeterminate) .native-wrapper {
  border-color: var(--border-color-checked);

  background: var(--checkbox-background-checked);
}

// Ionic Design Checkbox Invalid
// --------------------------------------------------
:host(.ion-invalid) {
  --focus-ring-color: #{globals.$ion-border-danger-default};
}

:host(.ion-invalid:not(.checkbox-checked)),
:host(.ion-invalid:not(.checkbox-checked).checkbox-disabled) {
  .native-wrapper {
    border-color: globals.$ion-border-danger-default;
  }
}

// Checkbox overrides the disabled state mixin properties
// to fix positioning issues, as the top and left properties
// cause the overlay to start inside the border. We unset
// these position properties and inherit width and height to
// ensure the border is covered.
:host(.checkbox-disabled) .native-wrapper:after {
  @include globals.disabled-state();
  @include globals.position(unset, unset, unset, unset);

  width: inherit;
  height: inherit;
}

// disabled, checked checkbox
:host(.checkbox-disabled.checkbox-checked) .native-wrapper {
  border-width: globals.$ion-border-size-0;

  background-color: globals.$ion-bg-primary-base-default;
}

// Checkbox Hover
// --------------------------------------------------------
@media (any-hover: hover) {
  :host(:hover) .native-wrapper {
    background-color: globals.$ion-primitives-neutral-100;
  }

  :host(:hover.checkbox-checked) .native-wrapper,
  :host(:hover.checkbox-checked) .checkbox-icon,
  :host(:hover.checkbox-indeterminate) .native-wrapper,
  :host(:hover.checkbox-indeterminate) .checkbox-icon {
    background-color: globals.$ion-semantics-primary-800;
  }
}

// Checkbox Focus
// --------------------------------------------------
// Only show the focus ring when the checkbox is focused and not disabled
:host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
  @include globals.focused-state(var(--focus-ring-width), globals.$ion-border-style-solid, var(--focus-ring-color));
}

// Checkbox: Active
// --------------------------------------------------------
:host(.ion-activated) .native-wrapper {
  background-color: globals.$ion-bg-input-press;
}

:host(.ion-activated.checkbox-checked) .native-wrapper,
:host(.ion-activated.checkbox-checked) .checkbox-icon,
:host(.ion-activated.checkbox-indeterminate) .native-wrapper,
:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
  background-color: globals.$ion-bg-primary-base-press;
}

:host(.ion-activated.ion-invalid:not(.checkbox-checked)) {
  background-color: globals.$ion-bg-input-press;

  .native-wrapper {
    border-color: globals.$ion-border-danger-press;
  }
}

// Ionic Design Checkbox Shapes
// --------------------------------------------------
:host(.checkbox-shape-soft) {
  --border-radius: #{globals.$ion-border-radius-100};
}

:host(.checkbox-size-small.checkbox-shape-soft) {
  --border-radius: #{globals.$ion-border-radius-025};
}

:host(.checkbox-shape-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

.checkbox-wrapper {
  min-height: #{globals.$ion-scale-1200};
}