@use "@fox/styles/abstracts" as fox;

.input {
  inline-size: 100%;
  color: fox.color(font-neutral-subtle);
  font-family: fox.font-family(body);
  font-size: fox.font-size(body-sm);

  &::file-selector-button {
    margin-inline-end: fox.gap(3);
    padding-block: fox.padding(3);
    padding-inline: fox.padding(5);
    border: fox.border(1) solid fox.color(button-default-border);
    border-radius: fox.form(radius-sm);
    background: fox.color(button-default-surface);
    color: fox.color(font-neutral-strong);
    font-family: fox.font-family(body);
    font-size: fox.font-size(label-sm);
    font-weight: fox.font-weight(bold);
    cursor: pointer;
  }
}

.existing {
  color: fox.color(font-neutral-subtle);
  font-family: fox.font-family(body);
  font-size: fox.font-size(body-sm);
}

// 라벨과 입력을 세로로 쌓는다 — `<label>`이 파일 입력을 함께 감싸 암시적으로 연결된다.
.field {
  display: flex;
  flex-direction: column;
  gap: fox.gap(2);
}

.download {
  color: fox.color(font-theme-primary);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}