@use '../abstracts' as *;

/* Atom - form field */
%a-form-field-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
  overflow: hidden;
  width: 100%;
  min-height: toRem(36);
  padding: toRem(4) toRem(12);
  border-width: toRem(1);
  border-style: solid;
  cursor: text;
  transition: all 150ms ease;
}

textarea.a-form-field {
  @extend %a-form-field-text;
  min-height: 110px;
  padding-top: 7px;

  &.-width-sm {
    width: toRem(355);
  }

  &.-width-md {
    width: toRem(461);
  }

  &.-width-xl {
    width: toRem(700);
  }
}

.a-form-field {
  @include outlineOnFocus($border-radius: 4px);

  &[type='text'],
  &[type='url'],
  &[type='email'],
  &[type='date'],
  &[type='number'],
  &[type='search'],
  &[type='datetime-local'] {
    @extend %a-form-field-text;
  }

  &[type='radio'] {
    position: relative;
    display: grid;
    place-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    color: currentColor;
    background-color: transparent;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    transition: 0.2s all linear;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &::before {
      content: "";
      width: toRem(10);
      height: toRem(10);
      border-radius: 50%;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
    }

    &:checked::before {
      transform: scale(1);
    }

    &:not(:disabled),
    &:not(:disabled) + label {
      cursor: pointer;
    }
  }

  &:disabled,
  &:disabled + label {
    cursor: not-allowed;
  }

  &:read-only {
    pointer-events: none;
  }
}