/*
 * Styles for Devsite directory framebox
 *
 * Directories contain a filter bar with dropdowns, an optional map displaying
 * a pin for each card, and a list of cards that can be shown in a 1 or 3
 * column layout.
 */

/* Content and error states */

.devsite-directory__main--error .devsite-directory__error {
  display: block;
}

.devsite-directory__error,
.devsite-directory__main--error .devsite-directory__filters,
.devsite-directory__main--error .devsite-directory__wrapper,
.devsite-directory__main--content-disabled .devsite-directory__wrapper {
  display: none;
}

/* Styles for filters */

.devsite-directory__filters {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #4285f4;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px;
}

.devsite-directory__filters.launchpad-filters {
  background: #db4437;
}

.devsite-directory__filters__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;

}

.devsite-directory__filters__icon .material-icons {
  -webkit-box-flex: 0 0 32px;
  -ms-flex: 0 0 32px;
  flex: 0 0 32px;
}


.devsite-directory__filters__label {
  text-transform: capitalize;
  margin-right: 8px;
}

.devsite-directory__filters__filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 24px;
  position: relative;
}

.devsite-directory__filters__filter:last-of-type {
  margin: 0;
}

.devsite-directory__filters__search {
  margin-right: 24px;
  position: relative;
  width: 260px;
}

.devsite-directory__filters__search .devsite-directory__filters__search__field {
  padding-left: 52px;
  width: 100%;
}

.devsite-directory__filters__search .devsite-search-image {
  color: rgba(0, 0, 0, .54);
  left: 14px;
  position: absolute;
  top: 6px;
}

.devsite-directory__filters__search .devsite-search-image::before {
  content: 'search';
}

.devsite-directory__filters__dropdowns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}

.devsite-directory__filters__filter-title {
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  min-width: 110px;
  padding-right: 24px;
}

.devsite-directory__filters__selected-items::before {
  color: transparent;
  content: ".";
  position: relative;
}

.devsite-directory__filters__filter-title .material-icons {
  position: absolute;
  right: 0;
}

.devsite-directory__filters__input-wrapper {
  background: #fff;
  -webkit-box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .15);
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .15);
  display: none;
  max-height: 250px;
  overflow-y: scroll;
  padding: 5px 10px;
  position: absolute;
  right: 0;
  top: calc(100% - 1px);
  z-index: 10;
}

.devsite-directory__filters__input {
  padding: 5px 0;
  white-space: nowrap;
}

.is-active .devsite-directory__filters__input-wrapper {
  display: block;
}

.cards__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Styles for map elements */

#directory-map {
  padding-bottom: 40%; /* 2:5 aspect ratio */
}

#directory-map:not(.enabled) {
  display: none;
}

.devsite-directory__info-window__wrapper {
  max-height: 250px;
  max-width: 400px;
}

.devsite-directory__info-window__item {
  padding: 10px 0;
}

.devsite-directory__info-window__item:not(:last-of-type) {
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

/* Styles for content items */

.devsite-directory__wrapper {
  margin: 0 -20px;
  min-height: 400px;
  padding: 32px 20px 0;
}

.devsite-directory__content {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.devsite-directory__content:not(.enabled) {
  display: none;
}

.devsite-directory__content--cards .devsite-directory__content__item {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26), 0 2px 5px 0 rgba(0, 0, 0, .26);
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc((100% - 40px) / 3);
  flex: 0 0 calc((100% - 40px) / 3);
  margin-bottom: 20px;
  padding: 20px;
}

.devsite-directory__content--cards .devsite-directory__content__item:not(:nth-child(3n)) {
  margin-right: 20px;
}

.devsite-directory__content__item {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  padding: 20px;
}

.devsite-directory__content__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.devsite-directory__pager {
  text-align: center;
}

/* Media queries */

@media screen and (max-width: 700px) {
  #directory-map {
    padding-bottom: 100%;
  }
}

@media only screen and (max-width : 920px) {
  .devsite-directory__filters {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    padding: 20px;
  }

  .devsite-directory__filters__icon {
    padding-bottom: 15px;
  }

  .devsite-directory__filters__search {
    margin-bottom: 20px;
    margin-right: 0;
    width: 100%;
  }

  .devsite-directory__filters__input-wrapper {
    width: 100%;
  }

  .devsite-directory__filters__input {
    white-space: normal;
  }

  .devsite-directory__filters__dropdowns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

  .devsite-directory__filters__filter {
    margin: 0 0 20px;
    width: 100%;
  }

  .devsite-directory__filters__filter:last-of-type {
    padding: 0;
  }

  .devsite-directory__filters__filter-title {
    width: 100%;
  }
}