@import '../../assets/style/colors.scss';

:host {
  --input-height: 32px;
  --input-radius: 6px;
  --input-border: var(--litpdf-border-color, #{map-get($primary-color-2, '50')});
  --input-border-hover: var(--litpdf-border-color-hover, #{map-get($primary-color-2, '75')});
  --input-focus-ring: var(--litpdf-focus-ring-color, #{map-get($primary-color, 'medium')});
  --input-color: var(--litpdf-text-color, #{map-get($primary-color-2, 'normal')});
  --input-placeholder-color: var(--litpdf-text-color-muted, #{map-get($primary-color-2, '75')});

  display: block;
}

// Kept in the accessibility tree (not `display: none`/`hidden`) so screen
// readers still get the input's accessible name from the real `<label>`.
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

input {
  height: var(--input-height);
  width: 100%;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  outline: none;
  font-size: 0.85rem;
  color: var(--input-color);
  background-color: var(--litpdf-surface-background, #fff);
  transition:
    border-color 120ms,
    box-shadow 120ms;

  &::placeholder {
    color: var(--input-placeholder-color);
  }

  &:hover:not(:disabled) {
    border-color: var(--input-border-hover);
  }

  // Visible, high-contrast focus ring (not just a border-color swap) so
  // keyboard users can always tell where focus is (WCAG 2.4.11).
  &:focus-visible {
    border-color: var(--input-focus-ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus-ring) 30%, transparent);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// Room for the clear button (22px wide, sitting at right: 4px) so long
// values don't render underneath it.
.wrapper:has(.clearButton) input {
  padding-right: 32px;
}

.clearButton {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  outline: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--input-placeholder-color);
  cursor: pointer;

  lit-icon {
    --icon-size: 10px;
  }

  &:hover {
    background-color: var(--litpdf-surface-background-hover, #{map-get($primary-color-2, '25')});
    color: var(--input-color);
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--input-focus-ring);
  }
}