/**
 * @provides aphront-list-filter-view-css
 */

.aphront-list-filter-wrap {
  border: 1px solid {$lightblueborder};
  margin: 0 16px;
  background: {$page.content};
  border-radius: 3px;
}

.aphront-list-filter-view {
  padding: 0;
}

.device-phone .aphront-list-filter-view {
  padding: 0;
}

.device-phone .aphront-list-filter-wrap {
  margin: 0;
  border: none;
  border-radius: 0;
  border-top: 1px solid {$lightblueborder};
  border-bottom: 1px solid {$lightblueborder};
}

.device-tablet .aphront-list-filter-wrap {
  margin: 0 8px;
}

.aphront-list-filter-view-content .phui-form-view {
  border-left: none;
  border-right: none;
  padding: 12px 0 6px;
}

.device-phone .aphront-list-filter-view-content .phui-form-view {
  padding: 0 0 4px 4px;
}

/* When a list filter view contains two consecutive forms, lay them out
   without much white space in between them so they look more contiugous. At
   the time of writing, this is used only in the Diffusion repository search
   UI. */
.aphront-list-filter-view-content form + form .phui-form-view {
  margin-top: -18px;
}

.aphront-list-filter-view-content .phui-form-view .aphront-form-label {
  width: 12%;
}

.aphront-list-filter-view-content .phui-form-view .aphront-form-input {
  width: 70%;
  margin-left: 13%;
  margin-right: 17%;
}

.device-phone .aphront-list-filter-view-content .phui-form-view
  .aphront-form-input {
  width: 98%;
  margin-left: 0;
  margin-right: 0;
}

.aphront-list-filter-view-collapsible .aphront-list-filter-view-content {
  border-top: 1px solid #e7e7e7;
}

.aphront-list-filter-reveal {
  margin-left: 13%;
  margin-right: 18%;
  padding: 8px 0;
  overflow: hidden;
  text-align: center;
}

.device .aphront-list-filter-reveal {
  width: auto;
  margin: auto;
  padding: 4px 8px;
}

.aphront-list-filter-reveal a {
  font-weight: bold;
  float: right;
}

.device .aphront-list-filter-reveal a {
  margin: 4px 0;
  float: left;
}

.aphront-list-filter-description {
  margin-right: 25%;
  float: left;
  text-align: left;
  line-height: 25px;
  color: {$greytext};
}

.device .aphront-list-filter-description {
  float: none;
  text-align: left;
  margin-right: 0;
}
