@import url("../foundations/colors.css");
@import url("../foundations/typography.css");

.tag-container {
  display: flex;
  gap: 0.5rem;
}

.tag {
  text-decoration: none;
  color: var(--grey);
  font-family: var(--primary);
  text-transform: uppercase;
  padding: 6px 4px 2px 4px;
  justify-content: center;
  font-size: 0.875;
  font-weight: 700;
  border-radius: 4px;
}
.tag-filter {
  text-decoration: none;
  color: var(--grey);
  font-family: var(--primary);
  text-transform: uppercase;
  padding: 10px 8px 6px 8px;
  justify-content: center;
  font-size: 0.875;
  font-weight: 700;
  border-radius: 4px;
}
.winter,
.hivern,
.invierno {
  color: var(--turquoise-darken);
  background: var(--aqua-light);
}
.autumn,
.tardo,
.otoño {
  color: var(--orange-dark);
  background: var(--orange);
}
.spring,
.primavera {
  color: var(--pink-light);
  background: var(--pink);
}
.summer,
.verano,
.estiu {
  color: var(--yellow-dark);
  background: var(--yellow);
}
.warning {
  color: var(--warning);
  border: 1px solid var(--warning);
}

.disabled {
  color: var(--disabled);
  border: 1px solid var(--disabled);
}