@import "/styles/variables";

.chip {
  font-family: CeraPro;
  border: none;
  padding: 8px 16px;
  background-color: $dark-06;
  border: 1px solid $dark-06;
  border-radius: 40px;
  color: $dark-03;
  font-size: 24px;
  line-height: 30px;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  span {
    display: inline-flex;
    align-items: center;
  }
  img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    fill: red;
  }

  &:hover {
    @media (hover) {
      color: $purple-hover;
      border: 1px solid $purple-04;
    }
  }

  &[active="active"] {
    background-color: $light;
    color: $purple-hover;
    border: 1px solid $purple-04;
  }

  @media (max-width: 991.98px) {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  @media (max-width: 767.98px) {
    padding: 4px 8px;
  }
}

.icon {
  display: inline-flex;
  margin-right: 8px;
  min-width: 22px;
  min-height: 22px;
  svg {
    width: 22px;
    height: 22px;
  }
}
