@use "../../../00-base/00-config/00-variables" as *;
@use "../../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Form: Input
// *
////////////////////////////////////////////////////////////////////////////////


// Every input type that is not a radio or checkbox or some special looking field:
// email, number, password, search, tel, text, url, color, date, datetime,
// datatime-local, month, time, week
#{$text-inputs-list},
textarea {
  appearance: none; // remove Safari mobile styling (box-shadow & corners)
  padding: rem(9) rem(10);
  width: 100%;
  border: rem(1) solid hsl(var(--clr-form-border));
  border-radius: rem(6);
  color: hsl(var(--clr-form));
  background: hsl(var(--clr-white));
  transition: all $duration $easing;

  &::placeholder {
    color: hsl(var(--clr-placeholder));
    opacity: 1;
  }

  &:focus,
  &:focus:hover {
    border-color: hsl(var(--clr-form-active-border));
  }

  &[disabled],
  &:disabled {
    opacity: .5;
    border-color: hsl(var(--clr-form-disabled-border));
    color: hsl(var(--clr-form-disabled));
    background: hsl(var(--clr-form-disabled-bg));
  }

  &.error {
    border-color: hsl(var(--clr-error));
    color: hsl(var(--clr-error));
  }
}


// * Errors & warnings and stuff
// =============================================================================

// Add error color on ALL inputs
input.error {
  color: hsl(var(--clr-error));
}


// * Admin
// =============================================================================

input.admin-menu-search {
  height: auto;
}

