.root {
}

.button {
  composes: buttonReset from "coral-framework/styles/reset.css";
}

.button:hover {
  cursor: pointer;
}

.list {
  background: white;
  position: absolute;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
  right: 0px;
  top: 20px;
  z-index: 10;
}

.list > ul, .list > ul > li {
  padding: 0;
  margin: 0;
}

.list > ul > li {
  padding: 10px;
  list-style: none;
  white-space: nowrap;
}

.icon {
  font-size: 14px;
  vertical-align: middle;
}


@custom-media --small-viewport (max-width: 425px);

.filterText {
  display: inline-block;
}

.filterIcon {
  vertical-align: middle;
  display: none;
}

@media (--small-viewport) {
  .filterText {
    display: none;
  }
  .filterIcon {
    display: inline-block;
  }
}