/* ==========================================================
   TAG: Transparent Tag with Icon and Text
   ========================================================== */

.transperent-tag {
  display: flex;
  padding: 9px 17px;
  align-items: center;
  gap: 8px;
  border-radius: 60px;
  background: var(
    --glass,
    linear-gradient(
      111deg,
      rgba(255, 255, 255, 0.2) 0.62%,
      rgba(255, 255, 255, 0.13) 100%
    )
  );
  backdrop-filter: blur(6px);
}

.tag-icon {
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  fill: var(--Transparent-Transparent, rgba(255, 255, 255, 0));
  background-blend-mode: multiply;
}

.tag-text {
  color: var(--color-icon-inverse);
  font-family: var(--font-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--label-font);
  line-height: 20px;
  /* preview--sap-talent-connect.lovable.app/Poppins/Medium */
}

/* ==========================================================
   RESPONSIVE: Tablets and Below (max-width: 1024px)
   ========================================================== */

@media screen and (max-width: 1024px) {
  .transperent-tag {
    padding: 4px 12px;
    gap: 6px;
  }

  .tag-icon {
    width: 14px;
    height: 14px;
  }

  .tag-text {
    font-size: 10px;
    line-height: 16px;
  }
}

/* ==========================================================
   RESPONSIVE: Mobile Phones (max-width: 480px)
   ========================================================== */

@media screen and (max-width: 480px) {
  .transperent-tag {
    display: none;
    padding: 5px 12px;
    gap: 5px;
  }

  .tag-icon {
    width: 12px;
    height: 12px;
  }

  .tag-text {
    font-size: 12px;
    line-height: 16px;
  }
}