.types-filter-wrapper {
  @include clearfix;
  background-color: darken($base-background-color, 2%);
  border-radius: $base-border-radius;
  font-size: 1.125rem;
  margin: $small-spacing auto 0;
  max-width: 26.25rem;
  position: relative;
  text-align: center;

  .down-circle {
    @include position(absolute, 1.15rem 1rem null null);
    fill: $action-color;
    pointer-events: none;

    @include media(max-width 430px) {
      display: none;
    }
  }
}

.types-filter-label {
  float: left;
  font-size: 1.125rem;
  font-weight: normal;
  margin-bottom: 0;
  padding-left: $base-spacing;
  padding-top: $small-spacing;

  span {
    @include media(max-width 470px) {
      display: none;
    }
  }
}

.types-filter-button {
  background-color: darken($base-background-color, 5%);
  cursor: pointer;
  float: right;
  min-width: 50%;
  padding: $small-spacing $base-spacing;
  text-align: left;
}

.types-filter {
  @include clearfix;
  @include position(absolute, 5rem (-$base-spacing) null);
  transition: all 0.2s ease-in-out;
  background-color: darken($base-background-color, 5%);
  border-radius: $base-border-radius;
  cursor: pointer;
  display: none;
  padding: $base-spacing;
  text-align: left;
  z-index: 1;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;

  @include media(730px) {
    left: -33%;
    right: -33%;
  }

  &::after {
    @include position(absolute, -0.5rem 50% null null);
    @include size(1rem);
    background-color: darken($base-background-color, 5%);
    content: "";
    margin-left: -0.5rem;
    transform: rotate(45deg)
  }

  li {
    margin-right: $small-spacing;
    width: 150px;
  }
}
