@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/button-reset";
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/rtl" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/input-base" as *;
@use "../form" as *;

$input-height: 40px;
$input-border: 1px solid $field-border;

/// Number input styles
/// @access public
/// @group number-input
@mixin number-input {
  .#{$prefix}--number {
    @include reset;
    position: relative;
    display: flex;
    //flex-direction: column;
  }

  .#{$prefix}--number input[type="number"] {
    @include type-style("body-short");
    @include font-family("sans");
    @include input-base;
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-width: 9.375rem;
    padding-right: $spacing-05;
    padding-left: $spacing-05;
    & ~ .#{$prefix}--label {
      order: 1;
    }

    &:disabled ~ .#{$prefix}--number__controls {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    & ~ .#{$prefix}--form-requirement {
      order: 3;
      color: $support-error-main; //TODO change $border-error
      font-weight: 400;
      margin-top: $spacing-02;
      overflow: visible;

      &::before {
        display: none;
      }
    }
  }

  .#{$prefix}--number input[type="number"] {
    //appearance: textfield; // Firefox: Hide spinner (up and down buttons)

    &::-ms-clear {
      display: none; // IE: Hide "clear-field" `x` button on input field
    }

    &::-webkit-inner-spin-button,
    ::-webkit-inner-spin-button {
      -webkit-appearance: none; // Safari: Hide number spinner
    }
  }

  .#{$prefix}--number__controls {
    @include reset;
    order: 1;
    position: relative;
    &:hover {
      .#{$prefix}--number__control-btn {
        opacity: 1;
      }
    }
  }

  .#{$prefix}--number--nocontrols {
    .#{$prefix}--number__control-btn {
      display: none;
    }
  }

  .#{$prefix}--number__control-btn {
    @include button-reset.reset;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: $input-height;
    max-width: $input-height;
    // height: $input-height;
    //  margin-left: -2px;
    font-weight: 600;
    font-size: 1.5rem;
    // border: 1px solid $input-border-color;
    opacity: 0;
    transition: all 0.1s;
    border-left: 1px solid $field-border-color;
    color: $action-default-fill-primary-default;
    //position: absolute;
    order: 3;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;

    @include rtl {
      left: 0;
      right: initial;
      border-left: none;
      border-right: $input-border;
    }

    span {
      display: block;
    }

    &:focus {
      border-left-color: transparent !important;
      @include focus-outline;
      z-index: 100;
    }

    &:hover {
      cursor: pointer;
    }

    &:hover svg {
      //TODO: fill: $hover-primary;
    }
    &:nth-child(1) {
      right: $input-height + 1px;
      @include rtl {
        right: initial;
        left: $input-height + 1px;
      }
    }
  }

  .#{$prefix}--number__controls svg {
    fill: $action-default-fill-primary-default;

    // Hover styles for use with old HTML w/o button
    &:hover {
      cursor: pointer;
      //TODO: fill: $hover-primary;
    }
  }

  .#{$prefix}--number[data-invalid] {
    .#{$prefix}--form-requirement {
      display: inline-block;
      max-height: calcRem(200px);
    }

    input[type="number"],
    input[type="number"]:focus {
      outline: none;
      border-color: $support-error-main;
      //box-shadow: 0 2px 0px 0px var(--support-01);
    }

    /* input[type='number']:focus ~ .#{$prefix}--label {
      color: var(--support-01);
    } */

    .#{$prefix}--number__controls {
      bottom: 2rem;
    }
  }

  .#{$prefix}--number--light input[type="number"] {
    background: var(--field-02);
  }

  // Skeleton State
  .#{$prefix}--number.#{$prefix}--skeleton {
    @include skeleton;
    width: 100%;
    height: 2.5rem;

    input[type="number"] {
      display: none;
    }
  }
}