@use "../../../styles/base/utilities.scss";

[data-fs-input-field] {
  // --------------------------------------------------------
  // Design Tokens for Input Field
  // --------------------------------------------------------

  // Default properties
  --fs-input-field-padding                     : var(--fs-spacing-2) var(--fs-spacing-2) 0;
  --fs-input-field-color                       : var(--fs-color-text);
  --fs-input-field-size                        : var(--fs-text-size-body);
  --fs-input-field-border-color                : var(--fs-border-color);

  --fs-input-field-transition-function         : var(--fs-transition-function);
  --fs-input-field-transition-property         : var(--fs-transition-property);
  --fs-input-field-transition-timing           : var(--fs-transition-timing);

  // Label
  --fs-input-field-label-padding               : 0 var(--fs-spacing-2);
  --fs-input-field-label-color                 : var(--fs-color-text-light);
  --fs-input-field-label-size                  : var(--fs-text-size-tiny);

  // Button
  --fs-input-field-button-height               : var(--fs-control-tap-size);

  // Error
  --fs-input-field-error-message-size          : var(--fs-text-size-legend);
  --fs-input-field-error-message-line-height   : 1.1;
  --fs-input-field-error-message-margin-top    : var(--fs-spacing-0);
  --fs-input-field-error-message-color         : var(--fs-color-danger-text);
  --fs-input-field-error-border-color          : var(--fs-color-danger-border);
  --fs-input-field-error-box-shadow            : 0 0 0 var(--fs-border-width) var(--fs-input-field-error-border-color);
  --fs-input-field-error-focus-ring            : var(--fs-color-focus-ring-danger);

  // Disabled
  --fs-input-field-disabled-bkg-color          : var(--fs-color-disabled-bkg);
  --fs-input-field-disabled-text-color         : var(--fs-color-disabled-text);
  --fs-input-field-disabled-border-width       : var(--fs-border-width);
  --fs-input-field-disabled-border-color       : var(--fs-border-color);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  position: relative;
  display: flex;
  flex-flow: column;

  [data-fs-input],
  [data-fs-label] {
    transition: var(--fs-input-field-transition-property) var(--fs-input-field-transition-timing) var(--fs-input-field-transition-function);
  }

  [data-fs-input] {
    --fs-input-padding: var(--fs-input-field-padding);

    padding: var(--fs-input-field-padding);
    color: var(--fs-input-field-color);

    &:placeholder-shown + label {
      top: calc(50% - (var(--fs-input-field-size) / 2));
      overflow: hidden;
    }

    &::placeholder {
      opacity: 0;
      transition: inherit;
    }

    &:focus::placeholder {
      opacity: 1;
    }

    &:not(:placeholder-shown) + label,
    &:focus + label {
      top: utilities.rem(6px);
      left: var(--fs-border-width);
      font-size: var(--fs-input-field-label-size);
    }

    &:disabled + label {
      cursor: not-allowed;
    }
  }

  [data-fs-label] {
    position: absolute;
    padding: var(--fs-input-field-label-padding);
    font-size: var(--fs-input-field-size);
    line-height: var(--fs-input-field-size);
    color: var(--fs-input-field-label-color);
  }

  // --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------

  &[data-fs-input-field-error="true"] {
    [data-fs-input] {
      border-color: var(--fs-input-field-error-border-color);

      @include utilities.input-focus-ring(
        $outline: #{var(--fs-input-field-error-focus-ring)},
        $border: #{var(--fs-input-field-error-border-color)}
      );

      &:hover:not(:disabled):not(:focus-visible):not(:focus) {
        border-color: var(--fs-input-field-error-border-color);
        box-shadow: var(--fs-input-field-error-box-shadow);
      }
    }

    [data-fs-input-field-error-message] {
      margin-top: var(--fs-input-field-error-message-margin-top);
      font-size: var(--fs-input-field-error-message-size);
      line-height: var(--fs-input-field-error-message-line-height);
      color: var(--fs-input-field-error-message-color);
    }
  }

  &[data-fs-input-field-actionable="true"] {
    min-width: utilities.rem(250px);

    [data-fs-input] { padding-right: var(--fs-spacing-13); }

    [data-fs-button] {
      position: absolute;
      top: 0;
      right: 0;
      height: var(--fs-input-field-button-height);

      [data-fs-button-wrapper]::before {
        position: absolute;
        left: calc(-1 * var(--fs-spacing-1));
        width: 1px;
        height: 80%;
        content: "";
        background-color: var(--fs-input-field-border-color);
      }
    }
  }
}