/* RentGuarantor CSS: tags.css (source: src/assets/scss/_tags.scss) */
/* Tag/Badge Component Styles - Figma Design */
/* Node: 141:31896 */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
  transition: background-color 0.2s ease;
  border: none;
}

/* Border Radius Variants */
.tag-corner {
  border-radius: 999px 999px 0px 999px; /* Small corner radius */
}

.tag-circle {
  border-radius: 999px; /* Fully rounded (pill shape) */
}

/* Color Variants */
.tag-yellow {
  background-color: #ffce55; /* Yellow */
  color: #232d5d; /* Navy text */
}

.tag-mid-blue {
  background-color: #7f9fec; /* Mid Blue */
  color: #232d5d; /* Navy text */
}

.tag-green {
  background-color: #00bf93; /* Green */
  color: #232d5d; /* Navy text */
}

.tag-navy {
  background-color: #5769c3; /* Navy */
  color: #ffffff; /* White text */
}

/* Hover effects for clickable tags */
a.tag:hover {
  cursor: pointer;
  opacity: 0.9;
}

button.tag {
  cursor: pointer;
}
button.tag:hover {
  opacity: 0.9;
}