.wrapper {
  display: flex;
  align-items: center;
}

.loading {
  position: absolute;
  display: inline-block;
  margin-left: 5px;
}

.ripple {
  composes: ripple from '~Components/Loading/LoadingIndicator.css';

  border: 1px solid $toolbarColor;
}

.input {
  margin-left: 8px;
  width: 200px;
  border: none;
  border-bottom: solid 1px $white;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: $white;
  transition: border 0.3s ease-out;

  &::placeholder {
    color: $white;
    transition: color 0.3s ease-out;
  }

  &:focus {
    outline: 0;
    border-bottom-color: transparent;

    &::placeholder {
      color: transparent;
    }
  }
}

.container {
  position: relative;
  flex-grow: 1;
}

.movieContainer {
  @add-mixin scrollbar;
  @add-mixin scrollbarTrack;
  @add-mixin scrollbarThumb;
}

.containerOpen {
  .movieContainer {
    position: absolute;
    top: 42px;
    z-index: 1;
    overflow-y: auto;
    min-width: 100%;
    max-height: 230px;
    border: 1px solid $themeDarkColor;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: $themeDarkColor;
    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
    color: $menuItemColor;
  }
}

.list {
  margin: 5px 0;
  padding-left: 0;
  list-style-type: none;
}

.listItem {
  padding: 0 16px;
  white-space: nowrap;
}

.highlighted {
  background-color: $themeLightColor;
}

.sectionTitle {
  padding: 5px 8px;
  color: $disabledColor;
}

.addNewMovieSuggestion {
  padding: 5px 3px;
  cursor: pointer;
}

@media only screen and (max-width: $breakpointSmall) {
  .input {
    min-width: 150px;
    max-width: 200px;
  }

  .container {
    min-width: 0;
    max-width: 200px;
  }
}