$error-icon: str-replace(url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{theme-color('danger')}' viewBox='0 0 96 96'%3e%3Cg%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M44%2024h8v32h-8V24z%22%2F%3E%3Cpath%20d%3D%22M48%2084c19.882%200%2036-16.118%2036-36S67.882%2012%2048%2012%2012%2028.118%2012%2048s16.118%2036%2036%2036zm0%208C23.7%2092%204%2072.3%204%2048S23.7%204%2048%204s44%2019.7%2044%2044-19.7%2044-44%2044zm-4-28h8v8h-8v-8z%22%2F%3E%3C%2Fg%3E%3C/svg%3E"), "#","%23");
$icon-size: 18px;

%x-invalid {
  border-color: theme-color("danger") !important;
}

.x-is-invalid {
  &.ng-select {
    .ng-select-container {
      @extend %x-invalid;
    }
  }

  &.form-control,
  &.custom-select,
  .ui-inputtext,
  &.ui-inputtext {
    @extend %x-invalid;
  }
}

.x-invalid-tab {
  position: relative;

  > *::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: $error-icon;
    background-repeat: no-repeat;
    background-size: $icon-size;
    background-position: calc(100% - #{$icon-size}/2) 50%;
  }
}