@import '../../scss/styles.scss';

@layer payload-default {
  .field-type.relationship {
    position: relative;
  }

  .relationship {
    &__wrap {
      display: flex;
      width: 100%;

      div.react-select {
        width: 100%;
        min-width: 0;
      }
    }

    &__error-loading {
      border: 1px solid var(--theme-error-500);
      min-height: base(2);
      padding: base(0.5) base(0.75);
      background-color: var(--theme-error-500);
      color: var(--theme-elevation-0);
    }

    &--allow-create {
      .rs__control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  html[data-theme='light'] {
    .relationship {
      &.error {
        > .relationship__wrap {
          .rs__control {
            @include lightInputError;
          }
        }

        button.relationship-add-new__add-button {
          @include lightInputError;
        }
      }
    }
  }

  html[data-theme='dark'] {
    .relationship {
      &.error {
        > .relationship__wrap {
          .rs__control {
            @include darkInputError;
          }
        }

        button.relationship-add-new__add-button {
          @include darkInputError;
        }
      }
    }
  }
}