/* You can add global styles to this file, and also import other style files */
// COLORS
$disabled: #f1f1f1;
$error: #c00000;
$text-color: #333333;
$success: #68a225;
$activated: #71a137;
$grey4: #666666;
$grey6: #afb6bd;


.error-field-message {
  color: $error !important;
  width: auto;
  text-align: right;
  font-size: 0.875em !important;
}

.error-field-message:empty {
  display: none;
}

span#error-field-message-mesos,
span#error-field-message-dies,
span#error-field-message-hores {
  text-align: right;
  width: 40%;
}

.error-field {
  border: solid 1px $error;
  border-left: solid 3px $error;
  color: $error;
}

.error-field-checked {
  border: solid 1px $error;
  border-left: solid 3px $error;
  color: $error;
}

.ok-field {
  border: solid 1px $success;
  border-left: solid 3px $success;
  border-radius: 0.2em;
}

.ok-field-div > span {
  color: transparent;
  text-shadow: 0 0 0 $activated;
}

input.ng-valid:not(:placeholder-shown):not(.error-field),
textarea.ng-valid:not(:placeholder-shown):not(.error-field),
quill-editor.ng-valid:not(.error-field):not(.novalidate),
select.ng-valid:not(.error-field):not(.novalidate) {
  @extend .ok-field;
}

input.ng-valid:not(:placeholder-shown):not(.error-field) > span,
textarea.ng-valid:not(:placeholder-shown):not(.error-field) > span,
quill-editor.ng-valid:not(.error-field):not(.novalidate) > span,
select.ng-valid:not(.error-field) > span {
  @extend .ok-field-div;
}

.warning-field {
  display: flex;
  margin-left: auto;
  font-size: 0.875em;
}

input,
select {
  &:disabled {
    color: $grey4;
    cursor: not-allowed;
    background-color: $disabled;
    border: 1px solid $grey6;
    opacity: 1;
  }

  &.ng-touched.ng-dirty.ng-invalid {
    @extend .error-field;
  }
  &.ng-touched.ng-dirty.ng-invalid1 {
    @extend .error-field;
  }
}
input:disabled::placeholder {
  color: transparent;
}
select:disabled {
  appearance: none;
}

textarea {
  &:disabled {
    background-color: $disabled;
    color: $grey4;
    cursor: not-allowed;
    border: 1px solid $grey6;
  }
  &.ng-touched.ng-dirty.ng-invalid{
    @extend .error-field;
  }
  &.ng-touched.ng-dirty.ng-invalid1{
    @extend .error-field;
  }
}
textarea:disabled::placeholder {
  color: transparent;
}