/* ══════════════════════════════════════════════
       C-TAG 
    ══════════════════════════════════════════════ */

.c-tag__wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: calc(var(--vw) * 4);
  row-gap: calc(var(--vw) * 8);
  height: calc(var(--vw) * 64);
}

.c-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--vw) * 8);
  padding: calc(var(--vw) * 2) calc(var(--vw) * 4);
  border-radius: calc(var(--vw) * 20);
  border: 2px solid transparent;
  font-size: calc(var(--vw) * 10);
  line-height: calc(var(--vw) * 14);
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: opacity 0.15s ease;
  text-decoration: none;
  height: fit-content;
}

.c-tag__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--vw) * 16);
  height: calc(var(--vw) * 16);
}
.c-tag__icon svg {
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════
       C-TAG types
    ══════════════════════════════════════════════ */

.c-tag--primary {
  color: var(--white);
  background-color: var(--primary-color);
}
.c-tag--secondary {
  color: var(--black);
  background-color: var(--secondary-color);
}
.c-tag--tertiary {
  color: var(--black);
  background-color: var(--tertiary-color);
  svg {
    path {
      fill: var(--black);
    }
  }
}
.c-tag--black {
  color: var(--white);
  background-color: var(--black);
}
.c-tag--light-gray {
  color: var(--black);
  background-color: var(--gray-50);
}
.c-tag--gray {
  color: var(--white);
  background-color: var(--gray-600);
}

.c-tag__container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--vw) * 20);
  flex-wrap: wrap;
}