@import "./checkbox";
@import "./checkbox.ionic.vars";

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

:host {
  // Border
  --border-radius: #{$checkbox-ionic-border-radius};
  --border-width: #{$checkbox-ionic-border-width};
  --border-style: #{$checkbox-ionic-border-style};
  --border-color: #{$checkbox-ionic-background-color-off};
  --checkmark-width: 3;

  // Focus
  --focus-ring-color: #9ec4fd;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  // Size
  --size: #{$checkbox-ionic-size};

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

    position: absolute;

    height: 100%;
    min-height: 48px;

    transform: translateY(-50%);

    content: "";

    cursor: pointer;

    z-index: 1;
  }

  .native-wrapper {
    position: relative;
  }
}

// Ionic Design Checkbox Sizes
// --------------------------------------------------
:host(.checkbox-size-small) {
  // Size
  --size: #{$checkbox-ionic-small-size};
}

// Ionic Design Checkbox Invalid
// --------------------------------------------------
:host(.ion-invalid) {
  --focus-ring-color: #ffafaf;

  .checkbox-icon {
    border-color: #f72c2c;
  }
}

// Checkbox Disabled
// --------------------------------------------------
// disabled, indeterminate checkbox
:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
  /* TODO(FW-6183): Use design token variables */
  border-width: 0;

  background-color: #{$background-color-step-600};
}

// disabled, unchecked checkbox
:host(.checkbox-disabled) .checkbox-icon {
  /* TODO(FW-6183): Use design token variables */
  border-color: #c9c9c9;

  background-color: #f5f5f5; // mix of #f5f5f5 with 60% #FFF
}

// disabled, checked checkbox
:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
  border-width: 0;

  background-color: $background-color-step-100;
}

// Checkbox Hover
// --------------------------------------------------------
@media (any-hover: hover) {
  :host(:hover) .checkbox-icon {
    /* TODO(FW-6183): Use design token variables */
    background-color: #ececec; // mix of 'white', '#121212', 0.08, 'rgb'
  }

  :host(:hover.checkbox-checked) .checkbox-icon,
  :host(:hover.checkbox-indeterminate) .checkbox-icon {
    /* TODO(FW-6183): Use design token variables */
    background-color: #1061da; // mix of '#1068eb', '#121212', 0.08, 'rgb'
  }
}

// Checkbox Focus
// --------------------------------------------------
// Only show the focus ring when the checkbox is focused and not disabled
:host(.ion-focused:not(.checkbox-disabled)) .checkbox-icon {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

// Checkbox: Active
// --------------------------------------------------------
:host(.ion-activated) .checkbox-icon {
  /* TODO(FW-6183): Use design token variables */
  background-color: #e3e3e3; // mix of 'white', '#121212', 0.12, 'rgb'
}

:host(.ion-activated.checkbox-checked) .checkbox-icon,
:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
  /* TODO(FW-6183): Use design token variables */
  background-color: #105ed1; // mix of '#1068eb', '#121212', 0.12, 'rgb'
}

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

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

.checkbox-wrapper {
  min-height: 48px;
}