.br-tag {
  --tag-color: var(--color-secondary-01);
  --tag-background: var(--interactive);
  --tag-text: var(--color-secondary-01);
  --tag-opacity: var(--surface-opacity-xs);
  --tag-font-size: var(--font-size-scale-up-01);
  --tag-margin: var(--spacing-scale-2x);
  --tag-icon: var(--icon-size-base);
  --tag-height: var(--tag-height-medium);
  --tag-height-small: var(--spacing-scale-2xh);
  --tag-height-medium: var(--spacing-scale-3xh);
  --tag-height-large: var(--spacing-scale-4xh);
  --tag-border-radius: var(--spacing-scale-half);
  --tag-label-spacing: var(--spacing-horizontal-center);
  --tag-label-size: var(--font-size-scale-base);
  --tag-label-weight: var(--font-weight-medium);
  --tag-label-margin: var(--spacing-scale-half);
  --tag-height-small: var(--spacing-scale-4x);
  --tag-height-medium: var(--spacing-scale-5x);
  --tag-height-large: var(--spacing-scale-5xh);
  --tag-height-extra: var(--spacing-scale-3xh);
  --tag-background: var(--color-primary-default);
  --tag-label-size: var(--font-size-scale-up-01);
  font-size: var(--tag-label-size);
  padding: var(--spacing-scale-base);
  align-items: center;
  background: var(--tag-background);
  border-radius: var(--tag-border-radius);
  color: var(--tag-color);
  display: inline-flex;
  font-size: var(--tag-label-size);
  font-weight: var(--tag-label-weight);
  height: var(--tag-height);
  justify-content: center;
  margin: var(--spacing-scale-base);
  padding: var(--spacing-scale-base);
}
.br-tag.interaction {
  --tag-height-small: var(--spacing-scale-4x);
  --tag-height-medium: var(--spacing-scale-5x);
  --tag-height-large: var(--spacing-scale-5xh);
  --tag-height-extra: var(--spacing-scale-3xh);
  --tag-background: var(--color-primary-default);
  --tag-label-size: var(--font-size-scale-up-01);
  font-size: var(--tag-label-size);
  padding: var(--spacing-scale-base);
}
.br-tag.interaction .br-button {
  --button-size: var(--tag-height-extra);
  margin-left: var(--spacing-scale-base);
}
.br-tag.interaction[data-toggle]:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-tag.interaction[data-toggle]:not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-tag.interaction:hover button.br-button.circle {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-tag.interaction:hover {
  cursor: pointer;
}
.br-tag.interaction-select {
  --tag-height-small: var(--spacing-scale-4x);
  --tag-height-medium: var(--spacing-scale-5x);
  --tag-height-large: var(--spacing-scale-5xh);
  --tag-height-extra: var(--spacing-scale-3xh);
  --tag-background: var(--color-primary-default);
  --tag-label-size: var(--font-size-scale-up-01);
  font-size: var(--tag-label-size);
  padding: var(--spacing-scale-base);
  --text-color: var(--color-secondary-01);
  --interactive: var(--color-primary-pastel-01);
  --interactive-rgb: var(--rgb-primary-pastel-01);
  --visited: var(--color-secondary-04);
  --hover: var(--surface-opacity-sm, 0.3);
  --pressed: var(--surface-opacity-lg, 0.65);
  --focus-color: var(--color-support-10);
  --active: var(--color-secondary-01);
}
.br-tag.interaction-select:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-tag.interaction-select:not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-tag.interaction-select.selected {
  --tag-background: var(--selected);
}
.br-tag.text {
  --tag-height-small: var(--spacing-scale-2xh);
  --tag-height-medium: var(--spacing-scale-3xh);
  --tag-height-large: var(--spacing-scale-4xh);
  border-radius: var(--tag-border-radius);
}
.br-tag.text span {
  padding-bottom: 3px;
}
.br-tag.status {
  --tag-height-small: var(--spacing-scale-baseh);
  --tag-height-medium: var(--spacing-scale-2x);
  --tag-height-large: var(--spacing-scale-3x);
  --tag-label-weight: var(--font-weight-regular);
  width: var(--tag-height);
  box-shadow: 0 0 0 1px var(--color-secondary-01);
  display: inline-block;
  z-index: 999;
  border-radius: 100em;
  line-height: 1;
  margin-top: -4px;
  position: relative;
  padding: 4px 6px;
  vertical-align: top;
}
.br-tag.status + span {
  display: inline-block;
  position: relative;
}
.br-tag.count {
  --tag-height-small: var(--spacing-scale-2xh);
  --tag-height-medium: var(--spacing-scale-3x);
  --tag-height-large: var(--spacing-scale-3xh);
  border-radius: 100em;
  box-shadow: 0 0 0 1px var(--color-secondary-01);
  display: inline-block;
  line-height: 1;
  min-height: var(--tag-height);
  min-width: var(--tag-height);
  position: relative;
  padding: 2px 6px;
  text-align: center;
}
.br-tag.icon {
  --tag-height-small: var(--spacing-scale-3xh);
  --tag-height-medium: var(--spacing-scale-4x);
  --tag-height-large: var(--spacing-scale-5xh);
  border-radius: 50%;
  padding: 0;
  text-align: center;
  width: var(--tag-height);
}
.br-tag.interaction.small {
  --tag-height: var(--tag-height-small);
}
.br-tag.interaction-select.small {
  --tag-height: var(--tag-height-small);
}
.br-tag.text.small {
  --tag-height: var(--tag-height-small);
}
.br-tag.status.small {
  --tag-height: var(--tag-height-small);
}
.br-tag.count.small {
  --tag-height: var(--tag-height-small);
}
.br-tag.icon.small {
  --tag-height: var(--tag-height-small);
}
.br-tag.interaction.medium {
  --tag-height: var(--tag-height-medium);
}
.br-tag.interaction-select.medium {
  --tag-height: var(--tag-height-medium);
}
.br-tag.text.medium {
  --tag-height: var(--tag-height-medium);
}
.br-tag.status.medium {
  --tag-height: var(--tag-height-medium);
}
.br-tag.count.medium {
  --tag-height: var(--tag-height-medium);
}
.br-tag.icon.medium {
  --tag-height: var(--tag-height-medium);
}
.br-tag.interaction.large {
  --tag-height: var(--tag-height-large);
}
.br-tag.interaction-select.large {
  --tag-height: var(--tag-height-large);
}
.br-tag.text.large {
  --tag-height: var(--tag-height-large);
}
.br-tag.status.large {
  --tag-height: var(--tag-height-large);
}
.br-tag.count.large {
  --tag-height: var(--tag-height-large);
}
.br-tag.icon.large {
  --tag-height: var(--tag-height-large);
}
.br-tag.support-01 {
  --tag-background: var(--color-support-01);
}
.br-tag.support-02 {
  --tag-background: var(--color-support-02);
}
.br-tag.support-03 {
  --tag-background: var(--color-support-03);
}
.br-tag.support-04 {
  --tag-background: var(--color-support-04);
}
.br-tag.support-05 {
  --tag-background: var(--color-support-05);
}
.br-tag.support-06 {
  --tag-background: var(--color-support-06);
}
.br-tag.support-07 {
  --tag-background: var(--color-support-07);
}
.br-tag.support-08 {
  --tag-background: var(--color-support-08);
}
.br-tag.support-09 {
  --tag-background: var(--color-support-09);
}
.br-tag.support-10 {
  --tag-background: var(--color-support-10);
}
.br-tag.support-11 {
  --tag-background: var(--color-support-11);
}
.br-tag.is-primary-pastel-01, .br-tag.primary-pastel-01, .br-tag[primary-pastel-01] {
  background-color: #c5d4eb;
}
.br-tag.is-primary-pastel-02, .br-tag.primary-pastel-02, .br-tag[primary-pastel-02] {
  background-color: #dbe8fb;
}
.br-tag.is-primary-lighten-01, .br-tag.primary-lighten-01, .br-tag[primary-lighten-01] {
  background-color: #2670e8;
}
.br-tag.is-primary-lighten-02, .br-tag.primary-lighten-02, .br-tag[primary-lighten-02] {
  background-color: #5992ed;
}
.br-tag.is-primary-default, .br-tag.primary-default, .br-tag[primary-default] {
  background-color: #1351b4;
}
.br-tag.is-primary-darken-01, .br-tag.primary-darken-01, .br-tag[primary-darken-01] {
  background-color: #0c326f;
}
.br-tag.is-primary-darken-02, .br-tag.primary-darken-02, .br-tag[primary-darken-02] {
  background-color: #071d41;
}
.br-tag.is-secondary-01, .br-tag.secondary-01, .br-tag[secondary-01] {
  background-color: #fff;
}
.br-tag.is-secondary-02, .br-tag.secondary-02, .br-tag[secondary-02] {
  background-color: #f8f8f8;
}
.br-tag.is-secondary-03, .br-tag.secondary-03, .br-tag[secondary-03] {
  background-color: #ededed;
}
.br-tag.is-secondary-04, .br-tag.secondary-04, .br-tag[secondary-04] {
  background-color: #ccc;
}
.br-tag.is-secondary-05, .br-tag.secondary-05, .br-tag[secondary-05] {
  background-color: #9e9d9d;
}
.br-tag.is-secondary-06, .br-tag.secondary-06, .br-tag[secondary-06] {
  background-color: #888;
}
.br-tag.is-secondary-07, .br-tag.secondary-07, .br-tag[secondary-07] {
  background-color: #555;
}
.br-tag.is-secondary-08, .br-tag.secondary-08, .br-tag[secondary-08] {
  background-color: #333;
}
.br-tag.is-secondary-09, .br-tag.secondary-09, .br-tag[secondary-09] {
  background-color: #000;
}
.br-tag.is-highlight, .br-tag.highlight, .br-tag[highlight] {
  background-color: #268744;
}
.br-tag.is-success, .br-tag.success, .br-tag[success] {
  background-color: #168821;
}
.br-tag.is-warning, .br-tag.warning, .br-tag[warning] {
  background-color: #ffcd07;
}
.br-tag.is-danger, .br-tag.danger, .br-tag[danger] {
  background-color: #e60000;
}
.br-tag.is-info, .br-tag.info, .br-tag[info] {
  background-color: #155bcb;
}
.br-tag.is-support-01, .br-tag.support-01, .br-tag[support-01] {
  background-color: #36a191;
}
.br-tag.is-support-02, .br-tag.support-02, .br-tag[support-02] {
  background-color: #f2e317;
}
.br-tag.is-support-03, .br-tag.support-03, .br-tag[support-03] {
  background-color: #d84800;
}
.br-tag.is-support-04, .br-tag.support-04, .br-tag[support-04] {
  background-color: #a26739;
}
.br-tag.is-support-05, .br-tag.support-05, .br-tag[support-05] {
  background-color: #40e0d0;
}
.br-tag.is-support-06, .br-tag.support-06, .br-tag[support-06] {
  background-color: #48cbeb;
}
.br-tag.is-support-07, .br-tag.support-07, .br-tag[support-07] {
  background-color: #c72487;
}
.br-tag.is-support-08, .br-tag.support-08, .br-tag[support-08] {
  background-color: #63007f;
}
.br-tag.is-support-09, .br-tag.support-09, .br-tag[support-09] {
  background-color: #f08080;
}
.br-tag.is-support-10, .br-tag.support-10, .br-tag[support-10] {
  background-color: #ff8c00;
}
.br-tag.is-support-11, .br-tag.support-11, .br-tag[support-11] {
  background-color: #fdf5e6;
}
.br-tag.is-facebook, .br-tag.facebook, .br-tag[facebook] {
  background-color: #3b5998;
}
.br-tag.is-google-plus, .br-tag.google-plus, .br-tag[google-plus] {
  background-color: #db4a39;
}
.br-tag.is-linkedin, .br-tag.linkedin, .br-tag[linkedin] {
  background-color: #0e76a8;
}
.br-tag.is-twitter, .br-tag.twitter, .br-tag[twitter] {
  background-color: #00acee;
}
.br-tag.is-whatsapp, .br-tag.whatsapp, .br-tag[whatsapp] {
  background-color: #25d366;
}
.br-tag.is-xbox, .br-tag.xbox, .br-tag[xbox] {
  background-color: #9bc848;
}
.br-tag.is-yahoo, .br-tag.yahoo, .br-tag[yahoo] {
  background-color: #720e9e;
}
.br-tag.is-youtube, .br-tag.youtube, .br-tag[youtube] {
  background-color: #c4302b;
}
.br-tag span {
  margin: var(--tag-label-margin);
}
.br-tag input {
  opacity: 0;
  position: relative;
  width: 0px;
}
.br-tag input:focus:checked + label,
.br-tag input:focus + label {
  outline-color: var(--focus-color);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
  padding: var(--spacing-scale-base);
}
.br-tag input + label {
  padding: var(--spacing-scale-base);
  cursor: pointer;
  position: relative;
}
.br-tag input + label::after {
  content: "";
  height: 20px;
  left: 0;
  position: relative;
  width: 20px;
  display: none;
}
.br-tag input:checked + label::after {
  border: solid var(--tag-color);
  border-width: 0 3px 3px 0;
  content: "";
  height: var(--icon-size-sm);
  transform: rotate(45deg);
  width: 8px;
  display: inline-block;
  margin: auto var(--spacing-scale-base);
}
.br-tag.tag-input-close .close button {
  --focus-offset: 0;
  background: transparent;
  border: 0;
  color: var(--color-support-03);
  outline: 0;
  padding-left: var(--spacing-scale-baseh);
}
.br-tag.tag-input-close .close button:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-tag.tag-input-close .close button:not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-tag.tag-input-close .close button:focus {
  outline: none;
}
.br-tag.tag-input-close .close button.focus-visible, .br-tag.tag-input-close .close button:focus-visible {
  outline-color: var(--focus-color);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
}

.br-tag-input {
  background: var(--bg-color);
  border: 1px solid #888;
  border-radius: 6px;
  color: var(--color-secondary-07);
  display: block;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-medium);
  height: var(--input-size);
  padding-left: var(--spacing-scale-2x);
  padding-right: var(--spacing-scale-5x);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.br-tag-input::placeholder {
  color: var(--text-color);
  font-size: var(--font-size-scale-base);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  opacity: 0.75;
}
.br-tag-input:not(:disabled):not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-tag-input:not(:disabled):not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-tag-input:not(:disabled):focus {
  outline: none;
}
.br-tag-input:not(:disabled).focus-visible, .br-tag-input:not(:disabled):focus-visible {
  outline-color: var(--focus-color);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
}
.br-tag-input:not(:disabled):focus, .br-tag-input:not(:disabled):focus-visible, .br-tag-input:not(:disabled).focus-visible {
  border-color: var(--focus-color);
  box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);
  outline: none;
}
.br-tag-input input {
  flex: 1;
}

.input-tag {
  padding: 0.9em 0.5em;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

/*# sourceMappingURL=tag.css.map*/