@import "../variables/dimensions";
@import "../variables/colors";

.rc-search {
  position: relative;
}

.rc-search__input-container {
  position: relative;
}

.rc-search__action-button {
  position: absolute;

  right: $search-action-button-right;
  top: 50%;

  transform: translateY(-50%);

  background: none;
  border: none;

  color: $search-action-button-color;
}

.rc-search__results {
  position: absolute;

  top: 100%;

  width: 100%;

  background-color: $search-results-background-color;

  border: 1px solid $search-border-color;
  border-top: none;

  z-index: 9;
}

.rc-search__results-footer {
  width: 100%;

  padding: $search-padding;

  background-color: $search-results-background-color;

  border: none;

  text-align: left;

  &:hover, &:active, &:focus {
    background-color: $search-results-background-color;

    text-decoration: underline;
  }
}

.rc-search__results-list {
  padding: 0;

  list-style: none;
}

.rc-search__result {
  padding: $search-padding;

  border-bottom: 1px solid $search-border-color;
}

.rc-search__no-result {
  padding: $search-padding-no-result $search-padding;

  text-align: center;

  color: $search-no-result-color;
}