@use 'src/styles/abstracts' as *;

.AutocompleteInput {
  position: relative;
  z-index: 5;
  &__disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  &__errorBar {
    top: calc(100% - 4px);
    left: 0;
    position: absolute;
    padding: $space-unit;
    z-index: 3;
    border: 0.0625rem solid $error-color-25;
    width: 100%;
    background-color: $error-color-5;
    border-bottom-left-radius: $border-radius-main;
    border-bottom-right-radius: $border-radius-main;
    &__message {
      @include monospaceFontFamily(16);
      span {
        margin-right: $space-sm;
      }
    }
    &__hint {
      color: #4a1212;
      display: flex;
      align-items: center;
      padding: $space-sm 1rem $space-sm 0;
      border: 0.0625rem solid $error-color-25;
      margin-top: $space-sm;
      background-color: $white;
      border-radius: $radius-main;
      .Text {
        color: #4a1212;
      }
      .Icon__container {
        margin-left: toRem(10px);
        margin-right: $space-xs;
      }
      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }

  &__container {
    height: 2rem;
    max-width: 100vw;
    border: $border-grey-light;
    display: flex;
    align-items: center;
    border-radius: $border-radius-main;
    padding: $space-xs;
    position: relative;
    z-index: 4;
    background-color: $white;
    &:hover {
      border: 0.0625rem solid $cuddle-110;
    }
    &__focused {
      border: 0.0625rem solid $cuddle-110;
    }
    &__advanced {
      height: 4.5rem;
      align-items: flex-start;
      padding: $space-xxxs $space-xs;
    }
    &__placeholder {
      position: absolute;
      left: $space-xs;
      color: $text-color-50;
      max-width: 95%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: $text-lg;
      @include monospaceFontFamily();
    }

    &__error {
      border-color: $error-color-80;
      &:hover {
        border-color: $error-color-80;
      }
    }
    .details-label {
      width: auto !important;
    }
    .codicon-suggest-more-info {
      display: none !important;
    }

    .scroll-decoration {
      box-shadow: unset !important;
    }
    .monaco-editor .find-widget.visible {
      display: none !important;
    }
    .monaco-hover {
      display: none !important;
    }
    .monaco-editor .squiggly-error {
      background: url('../../assets/icons/arrow-up.svg') repeat-x bottom left;
    }
  }
}
