@import 'components/array-editor.less';
@import 'components/array-field.less';
@import 'components/help.less';

.apos-required {
  label:first-of-type::after {
    content: ' *';
    color: @apos-base;
  }
}

/////////////////////////////
// generic state styles
/////////////////////////////
.apos-error
{
  input {
    &:first-of-type:not(.apos-field-input-radio) {
      .apos-glow(@apos-red);
    }
  }
  label {
    position: relative;
    &:first-of-type {
      color: @apos-red;
    }
    &:first-of-type::after {
      margin-left: 10px;
      content: "(" attr(data-apos-error-message) ")";
      color: inherit;
    }
  }
  &.apos-error--taken label {
    display: inline-block;
  }
  .apos-schema-fix {
    display: inline-block;
    position: absolute;
    left: ~"calc(100% + 10px)";
    font-size: 12px;
    color: @apos-blue;
    white-space: nowrap;
    text-decoration: none;
    top: 1px;
    .fa {
      display:inline-block;
      position: relative;
      margin-left: 2px;
      font-size: 10px;
    }
  }
}

.apos-warning
{
  input { .apos-glow(@apos-gold); }
  label { color: @apos-gold; }
}

/////////////////////////////
// specific states
/////////////////////////////

.apos-error--required
{
  label:first-of-type::after
  {
    color: @apos-red;
  }
}