@charset "UTF-8";

/* ===============================================================
 Search
================================================================*/

/* In header */

.md-search {
  /* flex-grow: 1; */
}

.search {
  position: relative;
}

.search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 1.5rem;
  box-sizing: border-box;
  color: #999;
  height: 2rem;
  padding-left: 2rem;
  padding-right: 1rem;
  -webkit-appearance: none;
  width: 100%;
}

[dir="rtl"] .search input[type="search"] {
  padding-right: 40px;
  padding-left: 20px;
}

.search input[type="search"]:focus {
  border: 1px solid var(--color-primary);
  color: var(--color-secondary-dark);
}

.search::before {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  color: #777;
  content: "\1F50D";
  font-size: .9rem;
  position: absolute;
  left: 15px;
}

[dir="rtl"] .search::before {
  right: .75rem;
  left: auto;
}

.search-full input[type="search"] {
  border: 1px solid #fff;
}

.sub-nav input[type="search"]::after {
  font-size: .75rem;
}


.new-request.container,
.search-results > .container {
  margin-bottom: 80px;
}

.md-search__input:hover {
  background-color: var(--color-primary-light);  
}


/* ===============================================================
 Search results
================================================================*/

.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.search-results-column {
  flex: 1 1 auto;
}

.md-search-result__link,
.md-search-result__link:visited {
  text-decoration: none;
}

.md-search-result__link:hover,
.md-search-result__link:active,
.md-search-result__link:focus {
  text-decoration: underline;
}

.search-result-link {
  font-weight: bold;
}

.md-search-result mark {
  color: var(--color-primary);
  background-color: var(--color-tertiary);
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-result-description {
  margin-top: 15px;
  word-break: break-word;
}

.search-result-votes, .search-result-meta-count {
  color: var(--color-primary-light);
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: var(--color-primary-dark);
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
  display: none;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}

/* Don't display CJK results in italic */
/* Add a yellow background instead */
html[lang|="zh"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em {
  font-style: normal;
  background: var(--color-tertiary);
}



/*****************************************************************
 Tablet & bigger 
*****************************************************************/

@media (min-width: 768px) {

  /**/

}

/*****************************************************************
 Desktop & bigger 
*****************************************************************/

/* 945px */
@media screen and (min-width: 60em) {

  /* search */

  .md-search {
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  .md-search__input {
    background-color: rgba(255, 255, 255, .3);
  }

  /* search results */

  .search-results {
    flex-direction: row;
  }
  
  .search-results-column {
    flex: 0 0 45%;
  }

}