@use '../../variables' as *;

.wrapper {
  position: relative;
  width: 100%;
}

.root {
  --text-field-font-size: 14px;
  --text-field-height: 32px;
  --text-field-error-color: var(--color-error-30);
  --text-field-help-color: var(--color-neutral-70);
  --text-field-disabled-color: var(--color-neutral-30);
  --text-field-placeholder-color: var(--color-neutral-70);
  --text-field-disabled-placeholder-color: var(--color-neutral-50);

  --text-field-bg: var(--color-surface-2);
  --text-field-hover-bg: var(--color-surface-2);
  --text-field-disabled-bg: var(--color-surface-1);

  --text-field-border-width: 1px;
  --text-field-border-color: var(--color-neutral-20);
  --text-field-hover-border-color: var(--color-neutral-40);
  --text-field-focus-border-color: var(--color-neutral-60);
  --text-field-disabled-border-color: var(--text-field-disabled-bg);
  --text-field-error-border-color: var(--color-error-20);

  --text-field-border-radius: var(--border-radius-small);
  --text-field-label-weight: 600;

  ----current-border-color: transparent;

  width: 100%;
  min-width: 0;
  font-size: var(--text-field-font-size);

  &.ghost {
    /** Zoombie fileds for now */
    // --text-field-bg: transparent;
    // --text-field-hover-bg: transparent;
    // --text-field-disabled-bg: transparent;

    // --text-field-border-width: 1px;
    // --text-field-border-color: transparent;
    // --text-field-hover-border-color: var(--color-neutral-20);
    // --text-field-focus-border-color: var(--color-accent-30);

    /** True ghost field code but Betsy wanted to tweak more on design */
    --text-field-bg: transparent;
    --text-field-hover-bg: transparent;
    --text-field-disabled-bg: transparent;

    --text-field-border-width: 0;
    --text-field-border-color: transparent;
    --text-field-hover-border-color: transparent;
    --text-field-focus-border-color: transparent;
  }

  &.zombie {
    --text-field-bg: transparent;
    --text-field-hover-bg: transparent;
    --text-field-disabled-bg: transparent;

    --text-field-border-width: 1px;
    --text-field-border-color: transparent;
    --text-field-hover-border-color: var(--color-neutral-20);
    --text-field-focus-border-color: var(--color-accent-30);
  }

  &.disabled {
    .field {
      background-color: var(--text-field-disabled-bg);
    }

    .field {
      border-color: var(--text-field-disabled-border-color);
    }

    .label,
    .help,
    .input {
      color: var(--text-field-disabled-color);
    }

    .input::placeholder {
      color: var(--text-field-disabled-placeholder-color);
    }
  }

  &:not(.disabled):hover {
    .field {
      background-color: var(--text-field-hover-bg);
      --current-border-color: var(--text-field-hover-border-color);
    }
  }

  &.error {
    .field {
      --current-border-color: var(--text-field-error-border-color);
    }

    .help {
      color: var(--text-field-error-color);
    }
  }

  .field:has(.input:focus),
  .field:has([data-input]:focus) {
    --current-border-color: var(--text-field-focus-border-color);
  }
}

.field {
  position: relative;
  background-color: var(--text-field-bg);
  border-radius: var(--text-field-border-radius);
  transition: color 80ms;

  &::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0 0 0 0;
    border: 0 solid var(--current-border-color);
    border-radius: var(--text-field-border-radius);
    border-width: var(--text-field-border-width);
    pointer-events: none;
  }
  // Label placed inside field
  .label {
    font-weight: 400;
    color: var(--text-field-help-color);
    font-size: var(--text-field-font-size);
    white-space: nowrap;
  }
}

.small {
  --text-field-font-size: 12px;
  --text-field-height: 24px;
  --text-field-border-radius: var(--border-radius-tiny);
}

.label {
  font-weight: var(--text-field-label-weight);
}

.help {
  color: var(--text-field-help-color);
  font-size: 0.85em;
}

.help,
.label {
  line-height: 1;
}

.helpSmall {
  font-size: 12px;
  font-weight: 400;
}

.input,
[data-input] {
  @include font(14px);
  flex: 1;
  background: transparent;
  outline: none;
  border: none;
  white-space: nowrap;
  /** Hack to fix flex padding so input does not push out text field items */
  overflow: hidden;
  padding: 0 8px;
  resize: none;
  color: var(--color-neutral-100);
  line-height: var(--text-field-height);
  font-size: var(--text-field-font-size);

  &::selection {
    background-color: rgba(var(--color-accent-30-rgb), 0.32);
    color: var(--color-neutral-100);
  }

  &::placeholder {
    color: var(--text-field-placeholder-color);
  }
}
[data-placeholder]:empty::before {
  white-space: nowrap;
  content: attr(data-placeholder);
  display: block;
  color: var(--text-field-placeholder-color);
}

textarea {
  margin-top: 8px;
  margin-bottom: 8px;
  resize: none;
}

.inputMultiline {
  line-height: 1.2em !important;
  white-space: pre-line;
  field-sizing: content;
  min-height: calc(2 * 1.2em);
}

.itemBefore ~ .input,
.itemBefore ~ [data-input] {
  padding: 0;
}