form-field.pcss

.form__text-input-addon {
  @apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg border border-grey-200 transition duration-200;
}

.form__text-input {
  @apply outline-none bg-grey-25 py-3 px-4 text-lg border-b-2 border-black transition duration-200;

  /* Fix FF form__text-input not adjusting it's width.
   * See: https://stackoverflow.com/a/48326796/303184
   */
  @apply min-w-0;

  &:hover:not([disabled]):not([readonly]) {
    @apply border-grey-300;
  }

  &:active,
  &:focus {
    &:not([disabled]):not([readonly]) {
      @apply border-blue-300;
    }
  }

  &::placeholder {
    @apply text-grey-200 font-normal;
  }

  &[readonly],
  &[disabled] {
    @apply bg-grey-125 cursor-not-allowed;

    &::placeholder {
      @apply text-grey-200;
    }
  }
}

.form__text-input-addon--l {
  @apply border-r-0;
}

.form__text-input-addon--r {
  @apply border-l-0;
}

.form__text-input:hover:not([disabled]):not([readonly]) ~ .form__text-input-addon {
  @apply border-grey-300;
}

.form__text-input:focus:not([disabled]):not([readonly]) ~ .form__text-input-addon,
.form__text-input:active:not([disabled]):not([readonly]) ~ .form__text-input-addon {
  @apply border-blue-300;
}

.form__text-input[readonly] ~ .form__text-input-addon,
.form__text-input[disabled] ~ .form__text-input-addon {
  @apply bg-grey-125 text-grey-200;
}

.form__text-input--has-addon-l.form__text-input {
  @apply border-l-0;
}

.form__text-input--has-addon-r.form__text-input {
  @apply border-r-0;
}

.form__select {
  @apply relative flex items-center w-full;

  &:not(.form__multiselect):after {
    @apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
    font-family: 'pirati-ui';
    /* chevron down */
    content: "\e925";
  }
}

.select__control {
  @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200 xl:py-5;

  /* Fix FF input not adjusting it's width.
   * See: https://stackoverflow.com/a/48326796/303184
   */
  @apply min-w-0;

  &:hover:not([disabled]):not([readonly]) {
    @apply border-grey-300;
  }

  &:active,
  &:focus {
    &:not([disabled]):not([readonly]) {
      @apply border-blue-300;
    }
  }

  &::placeholder {
    @apply text-grey-200 font-normal;
  }

  &[readonly],
  &[disabled] {
    @apply bg-grey-125 cursor-not-allowed;

    &::placeholder {
      @apply text-grey-200;
    }
  }
}


.form__checkbox {
  @apply relative flex;

  input {
    @apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-300 transition duration-200;

    &:hover:not([disabled]):not([readonly]) {
      @apply border-pirati-yellow;
    }

    &:checked {
      @apply bg-pirati-yellow border-transparent;

    }

    &[disabled] {
      @apply cursor-not-allowed;
    }
  }

  label {
    @apply leading-tight;
  }

  &:after {
    @apply inline absolute pointer-events-none;

    content: "";
    height: 5px;
    width: 12px;
    top: 6px;
    left: 4px;

    border-left: 2px solid theme("colors.white");
    border-bottom: 2px solid theme("colors.white");
    transform: rotate(-45deg);
  }
}


.radio {
  @apply relative;

  input {
    @apply w-5 h-5 mr-2 flex-shrink-0 appearance-none cursor-pointer outline-none bg-grey-200 border border-grey-200 transition duration-200 rounded-full;

    &:hover:not([disabled]):not([readonly]) {
      @apply border-grey-300;
    }

    &:active,
    &:focus {
      @apply border-blue-300;
    }

    &:checked {
      @apply bg-blue-300 border-transparent;
    }

    &[disabled] {
      @apply cursor-not-allowed;
    }
  }

  label {
    @apply flex items-center leading-tight;
  }

  &:after {
    @apply w-2 h-2 inline absolute pointer-events-none bg-white;

    content: "";
    /* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
    border-radius: 50%;
    top: calc((theme("spacing.5") - theme("spacing.2")) / 2);
    left: calc((theme("spacing.5") - theme("spacing.2")) / 2);
  }
}


.form-field--error {
  .form__text-input,
  .select__control,
  .form__text-input ~ .form__text-input-addon {
    @apply border-red-600;
  }
}