@import 'theme/variables.scss';
@import 'scss/styles.scss';

.collapsible-filter {
  overflow: hidden;
}

.cf-filter-header {
  background-color: $ta-black-2;
  color: $bw-9;
}

.cf-filter-toggle {
  cursor: pointer;
  font-size: 14px;
}

.cf-filter-content {
  width: 0;
  height: 25px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;

  &.open {
    width: fit-content;
  }

  &.closed {
    width: 0;
  }
}

.cf-filter-tags {
  gap: 4px;
  background-color: $ta-black-2;
}

.cf-filter-tag {
  padding: 4px;
  border-radius: 50px;
  background-color: $dark-2;
  cursor: pointer;
  font-size: 11px;
  transition: background-color 0.3s ease, color 0.3s ease;

  .cf-tag-text {
    margin: 0 4px;
  }

  &:hover {
    background-color: $bw2;
    color: $ta-black;
  }
}

.cf-filter-tag.selected {
  background-color: $blue-11;
  color: $white-2;

  &:hover {
    background-color: $ta-blue-16;
    color: $ta-blue-15;
  }
}