// Fluid NumberInput (v11 port). v10 fluid styles cover text input only.
// https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss

@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/typography";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// Fluid number input (Carbon React FluidNumberInput)
/// @access private
/// @group components
@mixin fluid-number-input {
  .#{$prefix}--number-input--fluid {
    position: relative;
    background: $field-01;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--number {
    block-size: 100%;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--label {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 0;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    white-space: nowrap;
    block-size: to-rem(16px);
    inline-size: calc(100% - 2rem);
    inset-block-start: to-rem(13px);
    inset-inline-start: $spacing-05;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--label::-webkit-scrollbar {
    display: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--label.#{$prefix}--label--slotted {
    gap: $spacing-03;
    overflow: visible;
  }

  // The base wrapper is `display: flex`, which would lay the embedded error
  // message and divider out as row items. Switch to block so they flow below
  // the field, and make it static so the absolutely positioned divider, status
  // icon, and steppers anchor to the fluid container instead.
  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper {
    display: block;
    position: static;
  }

  .#{$prefix}--number-input--fluid input[type="number"],
  .#{$prefix}--number-input--fluid input[type="text"] {
    padding: to-rem(32px) to-rem(80px) to-rem(13px) $spacing-05;
    background: transparent;
    min-block-size: to-rem(64px);
    outline: none;
  }

  // v10 applies invalid/focus outlines directly on the input element. In the
  // fluid variant the ring belongs on the field wrapper only, matching Carbon
  // React and the fluid text input pattern.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="number"]:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="text"]:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"][data-invalid],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"][data-invalid] {
    outline: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--nosteppers
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--nosteppers
    input[type="text"] {
    padding-inline-end: $spacing-05;
  }

  .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
    block-size: to-rem(40px);
    inset-block-start: to-rem(23px);
    transform: translate(0);
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__controls
    .#{$prefix}--number__rule-divider:first-of-type {
    display: none;
  }

  // When the input is focused, extend the focus ring onto the steppers via a
  // bottom border. The v10 base styles add a full outline on stepper hover.
  .#{$prefix}--number-input--fluid
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border-block-end-color: $focus;
    box-shadow: inset 0 -1px $focus;
  }

  .#{$prefix}--number-input--fluid
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type {
    box-shadow:
      inset 0 -1px $focus,
      inset -2px 0 $focus;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border-block-end-color: transparent;
    box-shadow: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type {
    box-shadow: inset -2px 0 $focus;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]:not(:focus)
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type:hover,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]:not(:focus)
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:last-of-type:hover {
    box-shadow: inset -2px 0 $support-01;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]:not(:focus)
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]:not(:focus)
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover {
    box-shadow: none;
    outline: none;
  }

  // Steppers show only a bottom border on hover while the input is focused.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number:not([data-invalid])
    .#{$prefix}--number__input-wrapper:not(
      .#{$prefix}--number__input-wrapper--warning
    )
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number:not([data-invalid])
    .#{$prefix}--number__input-wrapper:not(
      .#{$prefix}--number__input-wrapper--warning
    )
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover {
    border-block-end: 1px solid $focus;
    outline: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border-block-end: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn {
    border: initial;
    border-block-end-width: to-rem(1px);
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover:not(:focus),
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover:not(:focus),
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover:not(:focus),
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover:not(:focus) {
    outline: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus:hover,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"][data-invalid]
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:focus:hover {
    @include focus-outline("outline");
  }

  // The status icon is pinned to the first line of the message, below the
  // taller field, mirroring the fluid text input and select.
  .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
    inset-block-start: to-rem(73px);
    inset-inline-end: $spacing-05;
    pointer-events: none;
  }

  // Divider: always in DOM for fluid, shown only in invalid/warn states.
  .#{$prefix}--number-input--fluid .#{$prefix}--number-input__divider {
    display: none;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    .#{$prefix}--number-input__divider,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    .#{$prefix}--number-input__divider {
    position: absolute;
    display: block;
    border: none;
    margin: 0 1rem;
    block-size: to-rem(1px);
    border-block-end: 1px solid $ui-03;
    inline-size: calc(100% - 2rem);
    inset-block-start: to-rem(63px);
  }

  // Invalid/warn: hide field bottom border; divider draws the line, outline the color.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]
    input[type="text"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper--warning
    input[type="text"] {
    border-block-end: 1px solid transparent;
  }

  // The error/warn message is rendered inside the input wrapper in the fluid
  // variant. The base v10 styles only reveal a message that is a sibling of
  // the wrapper, so force it visible here.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number__input-wrapper
    .#{$prefix}--form-requirement {
    display: block;
    overflow: visible;
    max-block-size: 100%;
    padding: $spacing-03 to-rem(40px) $spacing-03 $spacing-05;
    margin: 0;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number[data-invalid]:not(:focus-within) {
    @include focus-outline("invalid");
  }

  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
    .#{$prefix}--number {
    @include focus-outline("outline");
  }

  // Readonly fluid fields keep disabled steppers instead of the readonly icon
  // used by the default variant. v10 hides controls for `.bx--number--readonly`.
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    .#{$prefix}--number__controls {
    display: flex;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    input[type="number"],
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    input[type="text"] {
    color: $text-02;
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    .#{$prefix}--number__control-btn {
    color: $disabled;
    pointer-events: none;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
      outline: none;
    }
  }

  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    input[type="number"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover,
  .#{$prefix}--number-input--fluid
    .#{$prefix}--number--readonly
    input[type="text"]:focus
    ~ .#{$prefix}--number__controls
    .#{$prefix}--number__control-btn:hover {
    outline: none;
  }
}

@include exports("fluid-number-input") {
  @include fluid-number-input;
}