.tag.unipol-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--Tag-Vertical-Padding) var(--Tag-Horizontal-Padding);
  border-radius: var(--Tag-Radius-Rounded, 8px) var(--Tag-Radius-Sharp, 0);
  border: var(--Tag-Border) solid;
  font: var(--Overline);
  letter-spacing: 0.24px;
  text-transform: uppercase;

  &.default {
    &.mobility {
      background-color: var(--Tag-Default-Mobility-Background);
      border-color: var(--Tag-Default-Mobility-Border);
      color: var(--Tag-Default-Mobility-Text);
    }

    &.welfare {
      background-color: var(--Tag-Default-Welfare-Background);
      border-color: var(--Tag-Default-Welfare-Border);
      color: var(--Tag-Default-Welfare-Text);
    }

    &.property {
      background-color: var(--Tag-Default-Property-Background);
      border-color: var(--Tag-Default-Property-Border);
      color: var(--Tag-Default-Property-Text);
    }

    &.savings {
      border-color: var(--Tag-Default-Savings-Border, #91b4c4);
      background: var(--Tag-Default-Savings-Background, #e4edf1);
      color: var(--Tag-Default-Savings-Text, #001c35);
    }
  }

  &.secondary {
    &.mobility {
      background-color: var(--Tag-Secondary-Mobility-Background);
      border-color: var(--Tag-Secondary-Mobility-Border);
      color: var(--Tag-Secondary-Mobility-Text);
    }

    &.welfare {
      background-color: var(--Tag-Secondary-Welfare-Background);
      border-color: var(--Tag-Secondary-Welfare-Border);
      color: var(--Tag-Secondary-Welfare-Text);
    }

    &.property {
      background-color: var(--Tag-Secondary-Property-Background);
      border-color: var(--Tag-Secondary-Property-Border);
      color: var(--Tag-Secondary-Property-Text);
    }

    &.savings {
      border-color: var(--Tag-Secondary-Savings-Border);
      background: var(--Tag-Secondary-Savings-Background, #3e6374);
      color: var(--Tag-Secondary-Savings-Text, #f9f9f7);
    }
  }

  &.neutral {
    background-color: var(--Tag-Neutral-Background);
    border-color: var(--Tag-Neutral-Border);
    color: var(--Tag-Neutral-Text);
  }

  &.neutral-stroke {
    background-color: var(--Tag-Neutral-Background, #fff);
    border-color: var(--Tag-Neutral-Stroke-Border, var(--Mini-Tag-Stroke, #82909c));
    color: var(--Tag-Neutral-Text, #001c35);
  }

  &.custom {
    background-color: var(--Tag-Custom-Background);
    border-color: var(--Tag-Custom-Border);
    color: var(--Tag-Custom-Text);
  }

  &.news {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--Tag-News-Gap, 8px);
    color: var(--Tag-News-Text);
    border: none;

    .tag-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--Tag-News-Dot, currentcolor);
      flex: 0 0 auto;
    }
  }

  &.mini-tag {
    display: flex;
    padding: var(--Mini-Tag-Vertical-Padding, 4px)
      var(--Mini-Tag-Horizontal-Padding, 12px);
    justify-content: center;
    align-items: center;
    border-radius: var(--Mini-Tag-Radius, 9999px);
    border: var(--Mini-Tag-Border, 1px) solid var(--Mini-Tag-Stroke, #82909c);
    color: var(--Mini-Tag-Text, #63727d);
    font: var(--Small-Overline);
  }

  &.complaint-tag {
    display: flex;
    padding: var(--Mini-Tag-Vertical-Padding, 4px)
      var(--Mini-Tag-Horizontal-Padding, 12px);
    justify-content: center;
    align-items: center;
    border-radius: var(--Mini-Tag-Radius, 9999px);
    border: var(--Mini-Tag-Border, 1px) solid;
    font: var(--Small-Overline);
    letter-spacing: 0.2px;
    text-transform: uppercase;

    &.open {
      background-color: var(--Tag-Complaint-Open-Background);
      border-color: var(--Tag-Complaint-Open-Border);
      color: var(--Tag-Complaint-Open-Text);
    }

    &.work-in-progress {
      background-color: var(--Tag-Complaint-Work-In-Progress-Background);
      border-color: var(--Tag-Complaint-Work-In-Progress-Border);
      color: var(--Tag-Complaint-Work-In-Progress-Text);
    }

    &.closed {
      background-color: var(--Tag-Complaint-Closed-Background);
      border-color: var(--Tag-Complaint-Closed-Border);
      color: var(--Tag-Complaint-Closed-Text);
    }
  }
}