@use './settings.colors' as *;

.validation {
  max-height: none;
  // padding: 1px; // för att den skall ha plats för ev. validering (och inte hoppa)
  position: relative;
  display: block;

  .ng-invalid > .validation-error--active & {
    // min-height: 71px; // för att den skall ha en fast höjd för felmeddelandet (så det inte hoppar)

    > div:first-of-type {
      outline: 3px solid #FF0000;
      // padding: 1px;
    }
  }
  .ng-invalid > .validation-error--editing.validation-error--active & {
    max-height: unset;
    > div:first-of-type {
      outline: none;
    }
  }

  .readonly &,
  &.readonly {
    transition: max-height 0.3s linear;
    max-width: none !important;

    .validation__status {
      display: none !important;
    }
  }
}

.validation__status {
  padding-left: 5px;
  display: none;
  align-items: top;

  .ng-invalid > .validation-error--active & {
    margin-top: 4px;
    display: flex;
  }
  .ng-invalid > .validation-error--editing.validation-error--active & {
    margin-top: 4px;
    display: flex;
  }
  .validation-error--active & {
    margin-top: 4px;
    display: flex;
  }
  .validation-error--editing.validation-error--active & {
    margin-top: 4px;
    display: flex;
  }
  .readonly & {
    display: none;
  }
}
.validation__status__icon,
.validation_status__icon {
  display: none;
  vertical-align: middle;
  .icon {
    .validation-error--active & {
      color: $primary-color--error !important;
    }
    .validation-error--editing & {
      color: $text-color--default !important;
    }
  }
  .validation-error--active &,
  .validation-error--editing & {
    display: inline-block;
  }
}

.validation__status__message {
  display: none;
  margin-left: 4px;
  vertical-align: middle;
  .validation-error--active & {
    color: $text-color--default;
    display: inline-block;
  }
  .validation-error--editing & {
    display: inline-block;
    color: $text-color--default;
  }
}