@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./input-otp.common";

// Ionic Input OTP
// --------------------------------------------------

:host {
  --padding-top: #{globals.$ion-space-400};
  --padding-end: #{globals.$ion-space-0};
  --padding-bottom: #{globals.$ion-space-400};
  --padding-start: #{globals.$ion-space-0};
  --color: #{globals.$ion-text-default};
  --min-width: #{globals.$ion-scale-1000};
  --border-width: #{globals.$ion-border-size-025};
  --border-style: #{globals.$ion-border-style-solid};
  --border-color: #{globals.$ion-border-input-default};
  --separator-width: #{globals.$ion-scale-200};
  --separator-border-radius: #{globals.$ion-border-radius-full};
  --separator-color: #{globals.$ion-bg-neutral-subtle-press};
  --highlight-color-focused: #{globals.$ion-border-focus-default};
  --highlight-color-valid: #{globals.$ion-border-success};
  --highlight-color-invalid: #{globals.$ion-border-danger-default};

  @include globals.typography(globals.$ion-body-md-regular);
}

:host(.has-focus) .native-input:focus {
  --border-width: #{globals.$ion-border-size-050};
}

// Input Description
// ----------------------------------------------------------------

.input-otp-description {
  @include globals.typography(globals.$ion-body-sm-medium);

  color: globals.$ion-text-subtlest;
}

// Sizes
// --------------------------------------------------

:host(.input-otp-size-small) {
  --width: #{globals.$ion-scale-1000};
  --height: #{globals.$ion-scale-1000};
}

:host(.input-otp-size-small) .input-otp-group {
  gap: globals.$ion-space-200;
}

:host(.input-otp-size-medium) {
  --width: #{globals.$ion-scale-1200};
  --height: #{globals.$ion-scale-1200};
}

:host(.input-otp-size-large) {
  --width: #{globals.$ion-scale-1400};
  --height: #{globals.$ion-scale-1400};
}

:host(.input-otp-size-medium) .input-otp-group,
:host(.input-otp-size-large) .input-otp-group {
  gap: globals.$ion-space-300;
}

// Shapes
// --------------------------------------------------

:host(.input-otp-shape-round) {
  --border-radius: #{globals.$ion-round-xl};
}

:host(.input-otp-shape-soft) {
  --border-radius: #{globals.$ion-soft-xl};
}

:host(.input-otp-shape-rectangular) {
  --border-radius: #{globals.$ion-rectangular-xl};
}

// Fills
// --------------------------------------------------

:host(.input-otp-fill-outline) {
  --background: #{globals.$ion-bg-input-default};
}

:host(.input-otp-fill-solid) {
  --border-color: #{globals.$ion-bg-input-bold-default};
  --background: #{globals.$ion-bg-input-bold-default};
}

// States
// --------------------------------------------------

:host(.input-otp-disabled) {
  --color: #{globals.$ion-text-disabled};
}

:host(.input-otp-fill-outline.input-otp-disabled) {
  --background: #{globals.$ion-bg-input-disabled};
  --border-color: #{globals.$ion-border-disabled};
}

:host(.input-otp-fill-outline.input-otp-readonly) {
  --background: #{globals.$ion-bg-input-read-only};
}

:host(.input-otp-fill-solid.input-otp-disabled) {
  --border-color: #{globals.$ion-bg-input-bold-disabled};
  --background: #{globals.$ion-bg-input-bold-disabled};
}

:host(.input-otp-fill-solid.input-otp-readonly) {
  --border-color: #{globals.$ion-bg-input-bold-read-only};
  --background: #{globals.$ion-bg-input-bold-read-only};
}

// Colors
// ----------------------------------------------------------------

:host(.ion-color) {
  --highlight-color-focused: #{globals.current-color(base)};
}

// Outline border should match the current color
// and the solid border should match when focused
:host(.input-otp-fill-outline.ion-color) .native-input,
:host(.input-otp-fill-solid.ion-color) .native-input:focus {
  border-color: globals.current-color(base, 0.6);
}

// Invalid
:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,
:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
  border-color: globals.ion-color(danger, base);
}

// Valid
:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
  border-color: globals.ion-color(success, base);
}

// Outline & Disabled
:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {
  border-color: globals.current-color(base, 0.3);
}