.ads-Tag {
  @apply text-h5
    flex
    justify-center
    items-center
    font-medium
    transition-colors
    duration-200
    border
    rounded-full
    leading-none;

  height: 22px;
  padding-left: 6px;
  padding-right: 6px;
  width: fit-content;
}

.ads-Tag--clickable {
  @apply cursor-pointer;
}

.ads-Tag--clickable:focus {
  @apply outline-none
    shadow-focus;
}

.ads-Tag--primary {
  @apply bg-transparent
    border-brandGreen-400
    text-brandGreen-400;
}

.ads-Tag--primary.ads-Tag--clickable:hover,
.ads-Tag--primary.ads-Tag--clickable:active,
.ads-Tag--primary.ads-Tag--clickable:focus {
  @apply text-brandGreen-500
    border-brandGreen-500;
}

.ads-Tag--primary.ads-Tag--filled {
  @apply bg-brandGreen-400
    text-white;
}

.ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:hover,
.ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:active,
.ads-Tag--primary.ads-Tag--filled.ads-Tag--clickable:focus {
  @apply bg-brandGreen-500
    border-brandGreen-500
    text-white;
}

.ads-Tag--secondary {
  @apply border-gray-400
    text-gray-700;
}

.ads-Tag--secondary.ads-Tag--clickable:hover,
.ads-Tag--secondary.ads-Tag--clickable:active,
.ads-Tag--secondary.ads-Tag--clickable:focus {
  @apply border-gray-500
    text-gray-800;
}

.ads-Tag--secondary.ads-Tag--filled {
  @apply bg-gray-400;
}

.ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:hover,
.ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:active,
.ads-Tag--secondary.ads-Tag--filled.ads-Tag--clickable:focus {
  @apply bg-gray-500;
}

.ads-Tag--toggleable {
  @apply border-gray-500
    text-gray-600;
}

.ads-Tag--toggleable:hover,
.ads-Tag--toggleable:active,
.ads-Tag--toggleable:focus {
  @apply border-gray-600
    text-gray-700;
}

.ads-Tag--toggleable.ads-Tag--filled {
  @apply bg-brandGreen-400
    border-brandGreen-400
    text-white;
}

.ads-Tag--toggleable.ads-Tag--filled:hover,
.ads-Tag--toggleable.ads-Tag--filled:active,
.ads-Tag--toggleable.ads-Tag--filled:focus {
  @apply bg-brandGreen-500
  border-brandGreen-500
  text-white;
}

.ads-Tag--iconOnly {
  @apply rounded-full;

  height: 22px;
  width: 23px;
}

.ads-Tag-icon {
  @apply mr-1;
}

.ads-Tag-icon--iconOnly {
  @apply mr-0;
}

/* TagGroup */
.ads-TagGroup {
  @apply flex
    flex-wrap;

  margin-bottom: -10px;
}

.ads-TagGroup > .ads-Tag {
  margin-bottom: 10px;
  margin-right: 6px;
}