:is(
  input[type="file"][data-screenshot-file],
  input[type="file"][data-scan-file],
  input[type="file"][data-duel-scan-file],
  input[type="file"][data-field-scan-file],
  input[type="file"][data-hm-capture-file]
) {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0.35rem;
  border: 1px solid rgba(126, 240, 189, 0.52);
  border-radius: 0.65rem;
  background: #061b1e;
  color: #d5e5e2;
  font: inherit;
  cursor: pointer;
}

:is(
  input[type="file"][data-screenshot-file],
  input[type="file"][data-scan-file],
  input[type="file"][data-duel-scan-file],
  input[type="file"][data-field-scan-file],
  input[type="file"][data-hm-capture-file]
)::file-selector-button {
  min-height: 44px;
  margin-right: 0.8rem;
  padding: 0.65rem 1rem;
  border: 1px solid #7ef0bd;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #215f59, #164640);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

:is(
  input[type="file"][data-screenshot-file],
  input[type="file"][data-scan-file],
  input[type="file"][data-duel-scan-file],
  input[type="file"][data-field-scan-file],
  input[type="file"][data-hm-capture-file]
):hover::file-selector-button {
  background: linear-gradient(180deg, #2a756c, #1b554e);
}

:is(
  input[type="file"][data-screenshot-file],
  input[type="file"][data-scan-file],
  input[type="file"][data-duel-scan-file],
  input[type="file"][data-field-scan-file],
  input[type="file"][data-hm-capture-file]
):focus-visible {
  outline: 3px solid #e6bd58;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  :is(
    input[type="file"][data-screenshot-file],
    input[type="file"][data-scan-file],
    input[type="file"][data-duel-scan-file],
    input[type="file"][data-field-scan-file],
    input[type="file"][data-hm-capture-file]
  )::file-selector-button {
    display: block;
    width: 100%;
    margin: 0 0 0.4rem;
  }
}
