:root {
  --result-info-padding: var(--number-space-0) var(--number-space-2);
  --result-info-background: var(--color-static-background-light-variant-20);
  --result-info-color: var(--color-static-on-background-light-variant-10);
  --result-info-icon-fill: var(--color-static-on-background-light-primary);
  --result-info-font-size: var(--font-size-default);
}

/* Seen on details */
.result-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-2);
}
.result-info-wrapper .result-info--top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--number-space-3);
}

.list-result-info,
.list-blog-category-tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--number-space-2);
}
.list-result-info .list-result-info,
.list-blog-category-tag .list-result-info {
  width: 100%;
}

.result-info--item,
.blog-category-tag--item {
  display: flex;
  align-items: center;
  padding: var(--result-info-padding);
  gap: var(--number-space-1);
  border-radius: var(--number-corner-1);
  background: var(--result-info-background);
  color: var(--result-info-color);
  font-size: var(--result-info-font-size);
}
.result-info--item svg path,
.blog-category-tag--item svg path {
  fill: var(--result-info-icon-fill);
}
.result-info--item__rating,
.blog-category-tag--item__rating {
  --result-info-padding: var(--number-space-1);
  --result-info-background: var(--color-static-on-background-light-primary);
  --result-info-icon-fill: var(--color-static-on-background-dark-primary);
  --result-info-color: var(--color-static-on-background-dark-variant-10);
}
.result-info--item__rating svg,
.blog-category-tag--item__rating svg {
  transform: translateY(-1px);
}
.result-info--item__id,
.blog-category-tag--item__id {
  --result-info-padding: var(--number-space-0) var(--number-space-1);
  --result-info-background: transparent;
  --result-info-color: red;
  --result-info-font-size: var(--font-size-small);
}
.result-info--item__id .result-info--item-id,
.result-info--item__id .result-info--item-text,
.blog-category-tag--item__id .result-info--item-id,
.blog-category-tag--item__id .result-info--item-text {
  font-family: var(--font-family-bold);
}
.result-info--item__check,
.blog-category-tag--item__check {
  --result-info-padding: 2px var(--number-space-0);
  --result-info-background: transparent;
  --result-info-icon-fill: var(--color-key-primary);
}
.property-details-header .result-info--item,
.property-details-header .blog-category-tag--item {
  align-self: flex-start;
}

.blog-category-tag--item {
  --result-info-padding: var(--number-space-0) var(--number-space-1);
  --result-info-background: var(--color-key-primary);
  --result-info-color: var(--color-static-on-background-light-primary);
  --result-info-font-size: var(--font-size-small);
}
.blog-category-tag--item span {
  color: var(--result-info-color) !important;
  font-family: var(--font-family-bold);
}

.rating-inline {
  display: flex;
  align-items: center;
  gap: var(--number-space-2);
  font-size: var(--font-size-small);
}
.rating-value {
  font-family: var(--font-family-bold);
}
.rating-star-wrapper {
  display: flex;
  gap: 2px;
}
.rating-star-wrapper svg path {
  fill: var(--color-static-background-light-neutral);
}
.rating-star-wrapper svg.rating-icon-active path {
  fill: var(--color-key-variant-10);
}

:root {
  --tag-background: lavender;
  --tag-color: hotpink;
  --tag-icon-color: hotpink;
}

.tag-status {
  display: flex;
  align-items: center;
  padding: var(--number-space-2);
  gap: var(--number-space-2);
  border-radius: var(--number-corner-1);
  background-color: var(--tag-background);
  color: var(--tag-color);
}
.tag-status svg {
  transform: scale(0.95);
}
.tag-status svg path {
  fill: var(--tag-icon-color);
}
.tag-status__success {
  --tag-background: var(--color-key-green-variant-10);
  --tag-color: var(--color-key-green-primary);
  --tag-icon-color: var(--color-key-green-primary);
}
.tag-status__pending {
  --tag-background: var(--color-static-background-light-variant-20);
  --tag-color: var(--color-static-on-background-light-variant-10);
  --tag-icon-color: var(--color-static-background-dark-primary);
}