/*
 * Forms elements styling
 */


// Global Form styles
input,
textarea {
  accent-color: var(--color-primary);
  resize: none;
}


// Styles for input fields
@mixin input {
  width: 100%;
  padding: 1rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-primary);
  transition: var(--transition-base);
  background: var(--color-white);

  font-size: var(--size-5);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-black);

  &::placeholder {
    color: var(--color-dark);
    opacity: 0.8;
  }

  &:focus {
    outline: none;
  }
}

// remove reset icon
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"],
input[type="textarea"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
  @include input;
}

input[type="search"] {
  width: 100%;
  max-width: 14rem;
  background: url(../assets/icons/search-icon.svg) no-repeat 1rem center;
  background-size: 1rem;
  padding-left: 2.5rem;
  height: 2.5rem;
}

textarea {
  height: 10rem;
}

label {
  display: inline-block;
  line-height: var(--leading-relaxed);
  color: var(--color-black);
  font-weight: var(--font-regular);
  margin-bottom: 0.25rem;
}
