@use "_variables" as *;
@use "_mixins" as *;
@use "_form-mixins" as *;

#search-video {
  text-overflow: ellipsis;

  @include peertube-input-text(100%);

  & {
    padding-inline-start: 42px; // For the search icon
    padding-inline-end: 20px; // For the search icon
  }

  &::placeholder {
    color: pvar(--input-placeholder-color);
  }
}

.search-button {
  position: absolute;
  top: 0;
  bottom: 0;

  @include left(18px);

  &:hover {
    opacity: 0.8;
  }

  my-global-icon {
    height: 18px;
    width: 18px;

    position: relative;
    top: -2px;
  }
}

.jump-to-suggestions {
  top: 100%;
  left: 0;
  z-index: z("search-typeahead");
  width: 100%;
}

#typeahead-suggestion-help,
#typeahead-input-help,
.suggestion {
  border: 1px solid pvar(--bg);
  background: pvar(--bg-secondary-400);
  transition: 0.3s ease;
  transition-property: box-shadow;
  cursor: pointer;
}

#typeahead-suggestion-help,
#typeahead-input-help,
.suggestion:last-of-type {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

#typeahead-suggestion-help,
#typeahead-input-help {
  margin-top: 9px;
  width: 100%;
  padding: 0.5rem 1rem;
  white-space: normal;

  ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0.5rem;

    em {
      font-weight: 600;
      font-style: normal;

      @include margin-right(0.2rem);
    }
  }
}

#typeahead-container {
  font-size: 14px;

  > div:last-child {
    // we have to switch the display and not the opacity,
    // to avoid clashing with the rest of the interface.
    display: none;
  }

  &:focus-within {
    > div:last-child {
      @media screen and (min-width: $mobile-view) {
        display: initial !important;
      }

      #typeahead-suggestion-help,
      #typeahead-input-help,
      .suggestion {
        box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
      }
    }

    input {
      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;

      @media screen and (min-width: $medium-view) {
        width: 500px;
      }
    }
  }
}

my-suggestion {
  width: 100%;
}
