/* Inputs
 * -------------------------------------------------------------------------- */

.input {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  max-width: 100%;
  padding: 0.5em;
  resize: none;

  &:focus,
  &:focus-within {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
    outline: none;
  }

  /* Don't show outlines for mouse interactions */
  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:disabled { opacity: 0.5; pointer-events: none; }

  &::-webkit-input-placeholder { color: var(--color-txt--placeholder); }
  &::-moz-placeholder { color: var(--color-txt--placeholder); }
  &:-ms-input-placeholder { color: var(--color-txt--placeholder); }
  &::placeholder { color: var(--color-txt--placeholder); }

  /* Putting last since this is non-standard and will sometimes break stuff after it */
  &::-ms-clear { display: none; }
}

.input--full-width {
  display: block;
  width: 100%;
}

.input--half-width {
  display: block;
  width: 50%;
  min-width: 50%;
}

.input--borderless {
  border-color: transparent;

  &:focus:not(.input--focusable) { box-shadow: none; }
}

.input--select {
  background: transparent url("/assets/icons/special-case-colors/select-arrows-gray-c5129f84.svg") right 0.8em center / 0.55em no-repeat;

  option {
    color: var(--color-txt);
    background: var(--color-bg--main);
  }
}

.input--date {
  @media (prefers-color-scheme: dark) {
    &::-webkit-calendar-picker-indicator { filter: invert(1); }
  }

  @supports (background: -webkit-named-image(i)) { padding-bottom: 0.25em; }
}

.input--compact {
  padding: 0 0.5em;
  width: auto;
}

.input--solid {
  background-color: var(--color-bg--main);
}

.input--sheet {
  background-color: var(--color-bg--sheet);
}

.input--plain {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;

  &:focus,
  &:focus-within {
    box-shadow: none;
    border: 0;
    outline: none;
  }
}

.input--transparent {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;

  &:focus {
    box-shadow: none;
    border-bottom: 1px solid currentColor;
  }
}

.input--underlined {
  border-color: transparent transparent var(--color-txt);
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-radius: 0;
  padding: 0.2em 0;
  caret-color: var(--color-tertiary--contrast);

  &.input--borderless { border: 0; }

  &:focus {
    border-bottom-color: var(--color-tertiary--contrast);
    box-shadow: none;
  }

  &.input--error,
  .input--error & {
    border-color: transparent transparent var(--color-negative);
    caret-color: var(--color-negative);

    &::selection { background-color: var(--color-bg--negative-glint); }

    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

  &.input--always-dark {
    border-color: transparent transparent var(--color-txt--reversed);
  }
}

.input--rounded {
  align-items: center;
  background-color: var(--color-bg--main);
  padding-left: 1em;
  border-radius: 3rem;
  border: 0;
  overflow: hidden;
}

.input--icon {
  padding-left: 2.6em;
  background-repeat: no-repeat;
  background-position: 1.6rem center;
  background-size: 1.25rem;
}

.input--icon-search { background-image: url("/assets/icons/search-2ac0e9c1.svg"); }
.input--icon-filter-gray { background-image: url("/assets/icons/special-case-colors/filter-gray-0c4a5a19.svg"); }
.input--icon-add-gray { background-image: url("/assets/icons/special-case-colors/add-gray-ee0de235.svg"); }

.input--hide-safari-autofill-button {
  &::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    width: 0;
  }
}

.input--error {
  color: var(--color-negative);

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-negative);
  }
}

textarea {
  color: var(--color-txt);
}

.checkbox {
  position: relative;

  &:hover {
    cursor: pointer;

    .checkbox__button {
      outline: none;
      box-shadow: 0 0 0 2px var(--color-focus-ring);
    }
  }
}

.checkbox__input,
.radio-button__input {
  opacity: 0;
  position: absolute;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  z-index: -1;

  &:focus + .checkbox__button,
  &:focus-within + .checkbox__button,
  &:focus + .btn--focusable {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.checkbox__button,
.radio-button__button {
  float: left;
  display: block;
  width: 1.7em;
  height: 1.7em;
  min-width: 1.7em;
  border-radius: 0.5rem;
  position: relative;

  .checkbox__input:checked + &::before {
    filter: var(--colorize-ink);
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("/assets/icons/selected-c8490dfc.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 70%;
  }
}

.checkbox__button--small,
.radio-button__button--small {
  width: 1.2em;
  height: 1.2em;
  min-width: 1.2em;
}

.details__label {
  &::after {
    content: "checked";
    position: absolute;
    text-indent: -999em;
  }

  details[open] & {
    &::after { content: ""; }
  }
}

summary:focus,
summary:focus-within {
  .details__checkbox {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.radio-button { display: flex; }
.radio-button__label { width: 100%; }

.radio-button__button {
  --checked-color: var(--color-secondary);
  border-radius: 50%;
  font-size: 0.8em;
  border: 1px solid var(--color-border);

  .radio-button__input:checked + & { border: 0.5em solid var(--checked-color); }

  .list--boxed & {
    border: 1px solid var(--color-border--heavy);
    background-color: var(--color-bg--main);
  }
}

.radio-button__reveal {
  display: none;

  .radio-button__input:checked ~ .radio-button__label & { display: block; }
}

.file-input {
  display: flex;
  align-items: center;
  background-color: var(--color-bg--main);
  padding-left: 1em;
  border-radius: 3rem;
  border: 0;

  &:hover { cursor: pointer; }

  input[type="file"] { display: none; }
}

.file-input__button {
  background-color: var(--color-bg--surface);
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 0 3rem 3rem 0;
}

.file-input__text {
  max-width: 100%;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.input-error {
  animation: pop-open 0.2s ease-in-out;
  color: var(--color-negative);
  padding-left: 1.25em;
  position: relative;

  &::before {
    filter: var(--colorize-red);
    content: '';
    width: 1.25em;
    height: 1.25em;
    position: absolute;
    left: 0;
    top: 0.1em;
    background: url("/assets/icons/warning-1f965358.svg") left center / 1em no-repeat;
  }
}

.optional-input {
  display: block;
  position: relative;

  input[type="email"], input[type="text"] { padding-right: 4rem; }
  input[disabled] { opacity: 1; }

  &:only-of-type .optional-input__remove { display: none; }
}

.optional-input__remove {
  position: absolute;
  width: 2em;
  height: 1.75em;
  top: 0.4em;
  right: 0.2em;
}

.input-label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.fieldset--bordered {
  border: 1px solid var(--color-border); border-radius: 0.6rem;
}

.form--disable-invalid-submit:invalid input[type="submit"] {
  opacity: 0.5; pointer-events: none;
}