@use '@gear-js/ui/mixins' as *;
@use '@/shared/assets/styles/shared' as *;
@use '@/shared/assets/styles/mixins' as *;
@use '@/shared/assets/styles/variables' as *;

.content {
  @include childrenMargin($marginMedium);

  &:not(.block) {
    max-width: 450px;
  }
}

.input {
  @include childrenMargin($margin, right);

  display: flex;
}

.wrapper {
  display: flex;
  align-items: center;
  flex: 1 1;
  border: 1px solid $borderColor;
  overflow: hidden;
  border-radius: $borderRadiusMedium;
  height: 40px;

  &:focus-within {
    border-color: $borderColor2;
  }

  &.error {
    border: 1px solid $errorColor;
  }

  .inputWrapper {
    flex: 1 1;
    display: flex;
    align-items: center;
    padding: toRem(10) toRem(16);

    .field {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.addButton {
  padding: 9px 12px;
  margin: 2px;
}