.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;

  border-radius: var(--form-border-radius);

  background: var(--blue-3);

  color: var(--blue-9);

  font-size: var(--font-size-1);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-1);
  line-height: var(--line-height-1);

  .tag__remove {
    align-self: center;
    height: fit-content;
    margin-left: var(--spacing-2);
    padding: 2px;

    transition: background-color 0.2s;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    svg {
      width: var(--font-size-1);
      height: var(--font-size-1);
    }

    &:hover,
    &:focus-visible {
      outline: none;

      background-color: var(--blue-6);
    }
  }
}
