@import "../scss/style.scss";

.autocomplete-window {
   @include custom-scrollbar;

   position: absolute;
   z-index: 2;
   width: 100%;
   min-height: 400px;
   height: 100%;
   border-radius: $border-radius-base;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
   background-color: $body-bg;
   box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.AutocompleteWindow__not-found {
   width: 100%;
   padding: 1em;
   text-align: center;
}

.section-row {
   border-bottom: 1px solid $border-color-light;
   background-color: $gray-background;

   &:focus {
      outline: none;

      .SectionRow__content {
         background-color: $table-bg-hover;
      }
   }

   &.subsection .SectionRow__content {
      border-left: 1px solid $border-color-light;
   }
}

.SectionRow__content {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: $padding-small-vertical $padding-small-horizontal;
   min-height: 46px;
   background-color: $body-bg;

   &:hover {
      background-color: $table-bg-hover;
   }
}

.SectionRow__left {
   display: flex;
   align-items: center;
   gap: 8px;
}

.SectionRow__unwrap-button {
   color: $primary;
   cursor: pointer;
}

.SectionRow__name {
   display: flex;
   flex-direction: column;
   align-items: start;
   font-size: $font-size-small;
}

.SectionRow__full-path {
   color: $text-muted;
}

.SectionRow__buttons {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 7px;
}