label,
input,
optgroup,
select,
textarea,
.checkboxGroup-label {
  font-family: var(--wp--preset--font-family--secondary);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  font-weight: bold;
}

textarea {
  min-height: 124px;
  resize: vertical;
}

input[type="password"] {
  text-transform: none;
}

input[type="number"] {
  padding-right: 0;
}

input[type="checkbox"],
input[type="radio"] {
  position: relative;
  width: 24px;
  height: 24px;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    pointer-events: none;
  }
}

input[type="checkbox"]:checked::after {
  content: "✔";
}

input[type="radio"] {
  border-radius: 50%;

  &:checked::after {
    content: "⬤";
  }
}

input,
textarea {
  @include placeholder {
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--wp--preset--color--grey-base);
    opacity: 1;
  }
}

input,
textarea,
.woocommerce-cart table.cart td.actions .coupon .input-text {
  padding: 12px;
  width: 100%;
  appearance: none;
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--black);
  border-radius: 0;
  cursor: text;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
  font-size: var(--wp--preset--font-size--small);
  font-family: var(--wp--preset--font-family--secondary);
  text-transform: uppercase;
  font-weight: bold;
}

.input-narrow {
  max-width: 250px;
}

.input-fixed {
  width: 250px !important;
}

.element-select select {
  padding: 10px;
  font-size: 1em;
}
