@import './globals';

tao-form {
  display: block;
  margin: 2em 0 0 0;

  form {
    fieldset {
      border: none;
      padding: 0;
      margin: 0 0 2em 0;

      legend {
        font-size: $font-size-l;
        margin: 0 0 1.5em 0;
      }
    }

    & > .error {
      display: block;
      margin-bottom: 2em;
      font-size: $font-size-s;
      padding: 1em;
      color: $red-color;
      border: 1px solid $red-color;
      border-radius: $border-radius-s;
      text-align: center;
    }

    .form-input {
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      margin: 0 0 0.75rem 0;

      &.hidden {
        display: none;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .input-label {
        display: block;
        width: $form-label-width;
        flex: 0 0 auto;
        padding: $form-field-padding-v 0;
        text-align: right;
        margin: 0 $form-field-margin-h 0 0;
        line-height: $form-label-line-height;
        font-size: $form-label-font-size;
        color: $light-grey-color;

        &.required abbr {
          text-decoration: none;
          color: $red-color;
          border: none;
        }
      }


      .input-content {
        min-height: $form-field-height;

        .input-field-wrapper {
          margin-bottom: 0.75rem;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .input-field-placeholder {
          display: inline-block;
          width: $form-field-width;
          padding: $form-field-padding-v $form-field-padding-h;
          line-height: $form-field-line-height;
          font-size: $form-field-font-size;
          color: $text-color;
        }

        & > .bottom-hint {
          display: block;
          color: $lighter-grey-color;
          margin: 0.375rem 0;
          font-size: $form-hint-font-size;
        }

        & > .error {
          color: $red-color;
          margin: 0.375rem 0;
          font-size: $form-hint-font-size;
        }
      }

      & > .hint {
        opacity: 0;
        color: $lighter-grey-color;
        margin: 0 0 0 $form-field-margin-h;
        padding: $form-field-padding-v 0;
        font-size: $form-hint-font-size;
        line-height: $form-field-line-height;
        transition: 200ms opacity;
      }

      &.input-with-errors .input-content .input-field {
        border-color: $red-color;
      }

      &:hover, &.focus {
        .hint {
          opacity: 1;
        }
      }
    }

    .form-buttons {
      margin: 2em 0 0 $form-label-width + $form-field-margin-h;

      .success-message {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: $button-padding;
        font-size: $button-font-size;
        line-height: $button-line-height;
        border-radius: $border-radius-s;
        text-align: center;
        vertical-align: middle;
        background: $white-color;
        border: 1px solid $green-color;
        color: $green-color;
        fill: $green-color;

        .icon {
          margin: 0 0.4em 0 0;
        }
      }
    }
  }

  &.form-without-label form .form-buttons {
    margin-left: 0;
  }
}