@use 'sass:list';
@use '../../../mixins/graphics';
@use '../../../components/base';
@use '../foundation';

$form-icon-width: 20px;
$form-icon-height: $form-icon-width;
$form-valid-color: green !default;
$form-invalid-color: red !default;
$form-valid-icon: url() !default;
$form-invalid-icon: url() !default;

form {
  $color: base.$base-color;

  div.field-container {
    &.hide-errors {
      div.invalid {
        label.icon:not(:hover) {
          ~ label.error {
            display: none;
          }
        }
      }
    }

    [data-spytext] {
      &:before {
        content: '';
        display: block;
        float: right;
        width: $form-icon-width;
        height: $form-icon-height;
      }
    }
    textarea {
      padding-right: $form-icon-width + extract(foundation.$input-padding, 2);
      &:before {
        content: '';
        display: block;
        float: right;
        width: $form-icon-width;
        height: $form-icon-width;
      }
    }
    &.valid.touched {
      &.focus {
        > label.placeholder {
          color: $form-valid-color;
        }
      }

      > label.icon {
        &:before {
          transform: rotateX(-180deg);
        }
        &:after {
          transform: rotateX(0deg);
        }
        opacity: 1;
      }

      > span {
        display: block;
        border: 1px solid $form-valid-color;
        padding: 3px 31px 3px 3px;
      }

      input,
      textarea,
      select,
      [data-spytext] {
        border-color: $form-valid-color;
      }
    }

    &.invalid.touched {
      &.focus {
        > label.placeholder {
          color: $form-invalid-color;
        }
      }

      > span {
        display: block;
        border: 1px solid $form-invalid-color;
        padding: 3px 31px 3px 3px;
      }

      > label.icon {
        opacity: 1;
        &:before {
          transform: rotateX(0deg);
        }
        &:after {
          transform: rotateX(-180deg);
        }
        &:hover ~ label.error {
          display: block;
        }
      }

      input,
      textarea,
      select,
      [data-spytext] {
        border-color: $form-invalid-color;
        &:focus {
          ~ label.error {
            display: block;
          }
        }
      }
    }

    &.checkable {
      > label.icon {
        height: 20px;
      }
    }

    // also set in linus/linus
    > label:not(.checkable) {
      cursor: text;
    }

    > label.error {
      display: none;
      color: white;
      background: $form-invalid-color;
      padding: 10px 15px;
      position: absolute;
      right: 5px;
      z-index: 9999;
      bottom: calc(100% + 7px);
      line-height: 1;

      &:after {
        content: '';
        display: block;
        position: absolute;
        right: 5px;
        top: 100%;
        height: 0;
        width: 0;
        @include graphics.right-angle-triangle(5px, $form-invalid-color, top);
      }
    }

    > label.icon {
      $icon-transition-time: 0.5s;
      transition: transform $icon-transition-time, opacity $icon-transition-time;
      opacity: 0;
      position: absolute;
      top: 0;
      right: list.nth(foundation.$input-padding, 2);
      width: $form-icon-width;
      height: foundation.$input-height;
      perspective: 1000px;
      &:before,
      &:after {
        content: '';
        transition: transform $icon-transition-time;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: $form-icon-width $form-icon-height;
        background-repeat: no-repeat;
        background-position: center center;
      }
      &:before {
        background-image: $form-invalid-icon;
        z-index: 2;
        transform: rotateX(-180deg);
      }
      &:after {
        background-image: $form-valid-icon;
        transform: rotateX(-180deg);
      }
    }

    > select ~ label.icon {
      right: list.nth(foundation.$input-padding, 2) * 2;
    }
  }
}