/* GIF PICKER */
%gifPickerContainer {
  background-color: transparent;
}

// HEADER
%gifPickerHeader {
  background-color: transparent;
}
%gifPickerSearch {
  background-color: rgba(255, 255, 255, 0.07);
  border: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.09);
  margin-top: 2px;
  &:focus-within {
    box-shadow: 0 0 2px 2px $main-color;
    transition: all 0.15s ease-in-out;
  }
}
%gifPickerSearchInput::placeholder {
  color: hsla(0, 0%, 100%, 0.3);
}

%gifPickerContent {
  // CATEGORIES
  %gifPickerCategoryFade,
  %gifPickerCategoryFadeBlurple {
    transition: all 0.15s ease-in-out;
  }
  %gifPickerCategoryFade {
    &:hover {
      background: rgba(0, 0, 0, 0.7);
    }
  }
  %gifPickerCategoryFadeBlurple {
    background: transparent;
    &:hover {
      background: transparent;
    }
    &:after {
      content: '';
      position: absolute;
      @include pos(-1px, -1px, -1px, -1px);
      display: block;
      background: $main-color;
      border-radius: 4px;
      opacity: 0.7;
    }
  }
  %gifPickerCategoryText {
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
  }
}

// RESULTS
%gifPickerResult {
  &:after {
    transition: all 0.15s ease-in-out;
  }
  &:hover {
    &:after {
      box-shadow: inset 0 0 0 2px $main-color, inset 0 0 0 3px rgba(0, 0, 0, 0.3);
    }
  }
}
%gifFavoriteButton {
	background-color: hsla(0, 0%, 0%, 0.6);
}

// ARROW KEY FOCUS SELECTION OUTLINE
%gifPickerResult[data-focused=true] {
  box-shadow: 0 0 0 2px cv('colors.focus');
}

// HINT CARD
%gifPickerEmptyHintCard {
  background: hsla(0, 0%, 100%, 0.04);
  color: hsla(0, 0%, 100%, 0.5);
}

// END CONTAINER
%gifPickerEndContainer {
  &:after {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.3;
  }
}

//Search Suggestion
%gifPickerSearchSuggestion {
  background: hsla(0, 0%, 100%, 0.04);
}
