timetracking/httpdocs/assets/styles/atoms/_inputs.scss

@use 'variables' as *;

// ─── Base Input ──────────────────────────────────────────────────────────────
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: $space-2 $space-3;
  font-family: $font-family-base;
  font-size: $font-size-base;
  color: $color-text-dark;
  background-color: $color-input-bg;
  border: 1px solid $color-input-border;
  border-radius: $radius-sm;
  box-shadow: $shadow-input;
  transition:
    border-color $transition-fast,
    box-shadow $transition-fast;
  appearance: none;
  -webkit-appearance: none;

  &::placeholder {
    color: $color-text-light;
  }

  &:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: $shadow-focus;
  }
}

// ─── Input Sizes ─────────────────────────────────────────────────────────────
.input--sm {
  width: 80px;
  text-align: center;
  font-weight: $font-weight-medium;
  letter-spacing: 0.02em;
}

// ─── Select (with arrow) ─────────────────────────────────────────────────────
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8a9a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right $space-3 center;
  padding-right: $space-8;
  cursor: pointer;

  &:hover {
    border-color: var(--color-primary-light);
  }
}

// ─── Select Label Tag (wie "Dogument", "Verrechenbar") ───────────────────────
.select-hint {
  font-size: $font-size-xs;
  color: $color-text-muted;
  font-style: italic;
}

// ─── Textarea ────────────────────────────────────────────────────────────────
.textarea {
  resize: vertical;
  min-height: 72px;
}

// ─── Help Icon ───────────────────────────────────────────────────────────────
.input-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid $color-border;
  background: $color-white;
  color: $color-text-muted;
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  cursor: help;
  flex-shrink: 0;
  transition: border-color $transition-fast, color $transition-fast;

  &:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}