.nexo-filter {
  width: 100%;
  color: var(--nexo-tab-initial);
}

.nexo-filter__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.nexo-filter__tabs,
.nexo-filter__terms {
  display: flex;
  flex-wrap: wrap;
}

.nexo-filter__tabs {
  gap: var(--nexo-tab-gap);
}

.nexo-filter__terms {
  gap: var(--nexo-term-gap);
}

.nexo-filter__tab,
.nexo-filter__term,
.nexo-filter__clear {
  appearance: none;
  border: 1px solid transparent;
  line-height: 1.2;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.nexo-filter__tab {
  font-family: var(--nexo-tab-font);
  font-size: var(--nexo-tab-size);
  font-weight: var(--nexo-tab-weight);
}

.nexo-filter__term {
  font-family: var(--nexo-term-font);
  font-size: var(--nexo-term-size);
  font-weight: var(--nexo-term-weight);
}

.nexo-filter__tab,
.nexo-filter__clear {
  color: var(--nexo-tab-initial);
  background: var(--nexo-tab-bg);
}

.nexo-filter__term {
  color: var(--nexo-term-initial);
  background: var(--nexo-term-bg);
}

.nexo-filter__tab,
.nexo-filter__term {
  padding: 10px 18px;
}

.nexo-filter__clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  background: transparent;
  margin-left: auto;
}

.nexo-filter__clear-icon {
  font-size: 1.35em;
  line-height: 0.8;
}

.nexo-filter__tab:hover,
.nexo-filter__clear:hover {
  color: var(--nexo-tab-hover);
}

.nexo-filter__term:hover {
  color: var(--nexo-term-hover);
}

.nexo-filter__tab.is-active {
  border-color: var(--nexo-tab-active);
  color: #fff;
  background: var(--nexo-tab-active);
}

.nexo-filter__term.is-active {
  border-color: var(--nexo-term-active);
  color: #fff;
  background: var(--nexo-term-active);
}

.nexo-filter--tabs-square .nexo-filter__tab,
.nexo-filter--tabs-outline-square .nexo-filter__tab,
.nexo-filter--terms-square .nexo-filter__term,
.nexo-filter--terms-outline-square .nexo-filter__term {
  border-radius: 0;
}

.nexo-filter--tabs-pill .nexo-filter__tab,
.nexo-filter--tabs-outline-pill .nexo-filter__tab,
.nexo-filter--terms-pill .nexo-filter__term,
.nexo-filter--terms-outline-pill .nexo-filter__term {
  border-radius: 999px;
}

.nexo-filter--tabs-outline-square .nexo-filter__tab,
.nexo-filter--tabs-outline-pill .nexo-filter__tab,
.nexo-filter--terms-outline-square .nexo-filter__term,
.nexo-filter--terms-outline-pill .nexo-filter__term {
  border-color: currentColor;
  background: transparent;
}

.nexo-filter--tabs-text .nexo-filter__tab,
.nexo-filter--terms-text .nexo-filter__term {
  padding-right: 0;
  padding-left: 0;
  border-color: transparent;
  background: transparent;
}

.nexo-filter--tabs-text .nexo-filter__tab.is-active,
.nexo-filter--tabs-outline-square .nexo-filter__tab.is-active,
.nexo-filter--tabs-outline-pill .nexo-filter__tab.is-active {
  color: var(--nexo-tab-active);
  background: transparent;
}

.nexo-filter--terms-text .nexo-filter__term.is-active,
.nexo-filter--terms-outline-square .nexo-filter__term.is-active,
.nexo-filter--terms-outline-pill .nexo-filter__term.is-active {
  color: var(--nexo-term-active);
  background: transparent;
}

.nexo-filter .nexo-filter__panels > .nexo-filter__panel {
  display: none;
}

.nexo-filter .nexo-filter__panels > .nexo-filter__panel.is-active {
  display: block;
}

.nexo-filter__panels,
.nexo-filter__panel {
  min-height: 0;
}

.nexo-filter .nexo-filter__panels > .nexo-filter__panel.nexo-filter__panel--default {
  display: none;
}

.nexo-filter__terms {
  animation: nexo-filter-panel-in 220ms ease both;
}

@keyframes nexo-filter-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .nexo-filter__header {
    flex-direction: column-reverse;
  }

  .nexo-filter__clear {
    align-self: flex-end;
  }
}