/*
  sizes: .a-input--sm (medium default)
  states: .a-input--readonly, .a-input--disabled, .a-input-error
*/

.a-input {
  --height: var(--lens-core-spacing-5);
  --py: var(--lens-core-spacing-1);
  --px: var(--lens-core-spacing-1-5);
  --gap: var(--lens-core-spacing-1);
  --bg: var(--lens-semantic-color-surface-default);
  --color: var(--lens-semantic-color-type-default);
  --placeholder-color: var(--lens-semantic-color-type-muted);
  --border-color: var(--lens-semantic-color-outline-default);
  --border-width: var(--lens-semantic-border-width-thin);
  --radius: var(--lens-semantic-radius-md);
  --font-size: var(--lens-semantic-font-text-body-font-size);
  --font-weight: var(--a-input-font-size, var(--lens-semantic-font-text-body-font-weight));
  --letter-spacing: var(--a-input-font-size, var(--lens-semantic-font-text-body-letter-spacing));
  --icon-size: var(--lens-semantic-icon-size-lg);
  position: relative;
  display: flex;
  align-items: center;
  height: var(--a-input-height, var(--height));
  background: var(--a-input-bg, var(--bg));
  color: var(--a-input-color, var(--color));
  box-shadow: inset 0 0 0 var(--a-input-border-width, var(--border-width))
    var(--a-input-border-color, var(--border-color));
  border-radius: var(--a-input-radius, var(--radius));
  font-size: var(--a-input-font-size, var(--font-size));
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  transition-property: background, color, box-shadow;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  --atlas-icon-size: lg;
  &.a-input--error {
    --border-color: var(--lens-semantic-color-status-error-default);
  }
  &.a-input--disabled {
    --border-color: var(--lens-semantic-color-outline-disabled);
    --color: var(--lens-semantic-color-type-disabled);
    --placeholder-color: var(--lens-semantic-color-type-disabled);
  }
  &.a-input--readonly {
    --bg: var(--lens-semantic-color-surface-variant);
  }
  &.a-input--sm {
    --px: var(--lens-core-spacing-1);
    --py: var(--lens-core-spacing-1);
    --gap: var(--lens-core-spacing-1);
    --height: var(--lens-core-spacing-4);
    --font-size: var(--lens-semantic-font-text-md-font-size);
    --font-weight: var(--lens-semantic-font-text-md-font-weight);
    --letter-spacing: var(--lens-semantic-font-text-md-letter-spacing);
    --icon-size: var(--lens-semantic-icon-size-md);
    --atlas-icon-size: md;
  }
  & input {
    height: 100%;
  }
  & input,
  & textarea,
  & select {
    appearance: none;
    border: none;
    background-color: transparent;
    flex: 1;
    min-width: 0;
    outline: none;
    padding: var(--a-input-padding-y, var(--py)) var(--a-input-padding-x, var(--px));
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-overflow: ellipsis;
    &:-webkit-autofill {
      box-shadow: 0 0 0 100px var(--a-input-bg, var(--bg)) inset;
      clip-path: inset(
        var(--a-input-border-width, var(--border-width)) round
          calc(
            var(--a-input-radius, var(--radius)) - var(--a-input-border-width, var(--border-width))
          )
      );
      -webkit-text-fill-color: var(--a-input-color, var(--color));
      caret-color: var(--a-input-color, var(--color));
    }
  }
  & ::placeholder {
    color: var(--a-input-placeholder-color, var(--placeholder-color));
    opacity: 1;
  }
  &:has(.a-input-adornments + input) {
    & .a-input-adornments:has(+ input) {
      padding-inline-start: var(--a-input-padding-x, var(--px));
      padding-inline-end: var(--a-input-gap, var(--gap));
    }
    & input {
      padding-inline-start: 0;
    }
  }
  &:has(input + .a-input-adornments) {
    & input {
      padding-inline-end: 0;
    }
    & input + .a-input-adornments {
      padding-inline-start: var(--a-input-gap, var(--gap));
      padding-inline-end: var(--a-input-padding-x, var(--px));
    }
  }
  & input[type="number"]:has(~ .a-input-adornments > .a-btn + .a-btn) {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
  & input[type="time"],
  & input[type="date"],
  & input[type="datetime-local"] {
    &:has(~ .a-input-adornments > .a-btn) {
      &::-webkit-calendar-picker-indicator {
        display: none;
      }
    }
  }
  & input[type="search"] {
    &:has(~ .a-input-adornments > .a-btn) {
      &::-webkit-search-cancel-button {
        display: none;
      }
    }
  }
  & ::-webkit-search-cancel-button {
    cursor: pointer;
  }
  & ::-webkit-calendar-picker-indicator {
    width: var(--a-input-icon-size, var(--icon-size));
    height: var(--a-input-icon-size, var(--icon-size));
    cursor: pointer;
  }
  & ::-webkit-datetime-edit {
    margin-inline-start: calc(-1 * var(--lens-core-spacing-0-5));
  }
  & ::-webkit-datetime-edit-year-field:focus,
  & ::-webkit-datetime-edit-month-field:focus,
  & ::-webkit-datetime-edit-day-field:focus,
  & ::-webkit-datetime-edit-hour-field:focus,
  & ::-webkit-datetime-edit-minute-field:focus,
  & ::-webkit-datetime-edit-second-field:focus,
  & ::-webkit-datetime-edit-millisecond-field:focus,
  & ::-webkit-datetime-edit-meridiem-field:focus {
    background-color: var(--lens-semantic-color-action-secondary-active-fill);
    color: var(--lens-semantic-color-action-secondary-on-secondary);
  }
  &:not(.a-input--disabled, .a-input--error):has(input:hover, textarea:hover, select:hover) {
    --border-color: var(--lens-semantic-color-outline-hover);
  }
  &:has(input:focus-within, select:focus-within) {
    &:not(.a-input--error) {
      --border-color: var(--lens-semantic-color-outline-active);
    }
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: var(--lens-semantic-border-width-focus-offset);
  }
  &:has(textarea) {
    height: auto;
    min-height: var(--a-input-height, var(--height));
    padding: var(--lens-core-spacing-0);
    & textarea {
      padding-inline: var(--a-input-padding-x, var(--px));
      min-height: calc(
        var(--a-input-height, var(--height)) - 2 * var(--a-input-border-width, var(--border-width))
      );
    }
    &.a-input--auto-size textarea {
      field-sizing: content;
    }
    &.a-input--no-resize textarea {
      resize: none;
    }
  }
}

.a-input-adornments {
  --gap: var(--a-input-adornments-gap, var(--lens-core-spacing-0-5));
  --color: var(--a-input-adornments-color, var(--lens-semantic-color-type-muted));
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  height: var(--a-input-height, var(--height));
  gap: var(--gap);
  color: var(--color);
  & > svg {
    fill: currentColor;
    width: var(--a-input-icon-size, var(--icon-size));
    height: var(--a-input-icon-size, var(--icon-size));
  }
}