@mgdis/mg-components 5.17.0 → 5.19.0

package/dist/collection/components/atoms/mg-badge/mg-badge.css

@@ -1,116 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-/* Variables */
-/* Mixins */
-/* Styles */
-.mg-badge {
-  padding: 0 0.4rem;
-  height: var(--mg-badge-size);
-  min-width: var(--mg-badge-size);
-  box-sizing: border-box;
-  border: 0.1rem solid;
-  border-radius: calc(var(--mg-badge-size) / 2);
-  font-size: var(--mg-badge-font-size);
-  font-weight: 600;
-  text-align: center;
-  line-height: var(--mg-badge-size);
-}
-.mg-badge.mg-badge--primary {
-  background-color: hsl(var(--color-dark));
-  border-color: hsl(var(--color-dark));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--primary.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--secondary {
-  background-color: hsl(var(--color-light));
-  border-color: hsl(var(--color-light));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--secondary.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--success {
-  background-color: hsl(var(--color-success));
-  border-color: hsl(var(--color-success));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--success.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-success));
-}
-.mg-badge.mg-badge--warning {
-  background-color: hsl(var(--color-warning));
-  border-color: hsl(var(--color-warning));
-  color: hsl(var(--color-dark));
-}
-.mg-badge.mg-badge--warning.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-warning));
-}
-.mg-badge.mg-badge--danger {
-  background-color: hsl(var(--color-danger));
-  border-color: hsl(var(--color-danger));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--danger.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-danger));
-}
-.mg-badge.mg-badge--info {
-  background-color: hsl(var(--color-info));
-  border-color: hsl(var(--color-info));
-  color: hsl(var(--color-light));
-}
-.mg-badge.mg-badge--info.mg-badge--outline {
-  background-color: transparent;
-  color: hsl(var(--color-info));
-}
-.mg-badge.mg-badge--text-color {
-  background-color: currentColor;
-  border-color: currentColor;
-}
-.mg-badge.mg-badge--text-color .mg-badge__value {
-  color: hsl(var(--mg-badge-text-color, var(--color-light)));
-}
-.mg-badge.mg-badge--text-color.mg-badge--outline {
-  background-color: transparent;
-}
-.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value {
-  color: currentColor;
-}
-
-.mg-badge,
-mg-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}

package/dist/collection/components/atoms/mg-button/mg-button.css

@@ -1,182 +0,0 @@
-/* Variables */
-/* Mixins */
-:host {
-  display: inline-block;
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-:host(:focus-visible) {
-  outline: 0;
-}
-:host(:focus-visible) .mg-button {
-  outline-color: -webkit-focus-ring-color;
-  outline-style: auto;
-  outline-width: 0.2rem;
-}
-
-:host(:hover) .mg-button--flat:not(.mg-button--disabled) {
-  background: hsl(var(--color-dark), 0.1);
-}
-
-:host([full-width]) {
-  display: block;
-}
-
-:host([disabled]),
-:host([aria-disabled=true]) {
-  pointer-events: none;
-}
-
-.mg-button.mg-button--primary {
-  border-color: hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--mg-button-primary-font-color));
-  background: linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--primary:not(.mg-button--disabled) {
-  background: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
-}
-
-.mg-button.mg-button--secondary {
-  border-color: hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--mg-button-secondary-font-color));
-  background: linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--secondary:not(.mg-button--disabled) {
-  background: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
-}
-
-.mg-button.mg-button--danger {
-  border-color: hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-neutral));
-  background: linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--danger:not(.mg-button--disabled) {
-  background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-
-.mg-button.mg-button--danger-alt {
-  border-color: hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-danger));
-  background: linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled) {
-  background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
-}
-
-.mg-button.mg-button--info {
-  border-color: hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-neutral));
-  background: linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--info:not(.mg-button--disabled) {
-  background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-
-.mg-button.mg-button--success {
-  border-color: hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));
-  color: hsl(var(--color-dark));
-  background: linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));
-}
-
-:host(:hover) .mg-button--success:not(.mg-button--disabled) {
-  background: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-
-/* Styles */
-.mg-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.6rem;
-  padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;
-  min-height: var(--default-size);
-  box-sizing: border-box;
-  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));
-  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));
-  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));
-  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));
-  cursor: pointer;
-  background-image: none;
-  border-top-width: var(--mg-button-border-top-width, 0.1rem);
-  border-right-width: var(--mg-button-border-right-width, 0.1rem);
-  border-bottom-width: var(--mg-button-border-bottom-width, 0.1rem);
-  border-left-width: var(--mg-button-border-left-width, 0.1rem);
-  border-style: solid;
-  text-decoration: none;
-  font-family: inherit;
-  font-weight: var(--mg-button-font-weight, normal);
-  text-align: left;
-  font-size: var(--font-size);
-  touch-action: manipulation;
-}
-.mg-button.mg-button--disabled {
-  opacity: var(--mg-button-disabled-opacity);
-  cursor: default;
-}
-.mg-button.mg-button--icon {
-  padding: 0;
-  justify-content: center;
-  width: var(--default-size);
-  height: var(--default-size);
-  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));
-  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));
-  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));
-  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));
-  font-size: var(--font-size);
-  line-height: var(--font-size);
-}
-.mg-button.mg-button--flat {
-  background: none;
-  border: none;
-}
-.mg-button.mg-button--link {
-  padding: unset;
-  min-height: unset;
-  background: unset;
-  border: unset;
-  border-radius: unset;
-  text-decoration: underline;
-}
-.mg-button.mg-button--link slot {
-  font-weight: 600;
-}
-.mg-button.mg-button--link:hover {
-  text-decoration: none;
-}
-.mg-button.mg-button--full-width {
-  display: flex;
-  justify-content: center;
-}
-.mg-button.mg-button--loading > mg-icon:first-of-type {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.mg-button.mg-button--loading .mg-button__content {
-  opacity: 0;
-}
-.mg-button mg-icon:only-child,
-.mg-button ::slotted(mg-icon) {
-  display: inline-flex;
-  flex-shrink: 0;
-  line-height: 1;
-  margin: auto 0;
-}
-.mg-button slot,
-.mg-button ::slotted(*:not(mg-icon)) {
-  text-decoration: none;
-  font-family: inherit;
-  font-weight: var(--mg-button-font-weight, normal);
-  text-align: left;
-  font-size: var(--font-size);
-  display: flex;
-  align-items: center;
-  column-gap: 0.6rem;
-}

package/dist/collection/components/atoms/mg-card/mg-card.css

@@ -1,75 +0,0 @@
-.mg-card {
-  position: relative;
-  width: 100%;
-  max-width: var(--mg-card-max-width);
-  min-width: var(--mg-card-min-width);
-  padding: var(--mg-card-padding, var(--mg-card-padding-default));
-  overflow: var(--mg-card-overflow, var(--mg-card-overflow-default));
-  box-sizing: border-box;
-  z-index: inherit;
-  background: var(--mg-card-background, var(--mg-card-background-default));
-  border: var(--mg-card-border, var(--mg-card-border-default));
-  border-radius: var(--mg-card-border-radius, var(--mg-card-border-radius-default));
-  box-shadow: var(--mg-card-box-shadow, var(--mg-card-box-shadow-default));
-}
-.mg-card ::slotted(*) {
-  --mg-card-border: var(--mg-card-border-default);
-  --mg-card-padding: var(--mg-card-padding-default);
-  --mg-card-border-radius: var(--mg-card-border-radius-default);
-  --mg-card-background: var(--mg-card-background-default);
-  --mg-card-box-shadow: var(--mg-card-box-shadow-default);
-  --mg-card-max-width: unset;
-  --mg-card-min-width: unset;
-}
-.mg-card.mg-card--info {
-  overflow: hidden;
-}
-.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-.mg-card.mg-card--info.mg-card--fill {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--warning {
-  overflow: hidden;
-}
-.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-}
-.mg-card.mg-card--warning.mg-card--fill {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--success {
-  overflow: hidden;
-}
-.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-.mg-card.mg-card--success.mg-card--fill {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--danger {
-  overflow: hidden;
-}
-.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-.mg-card.mg-card--danger.mg-card--fill {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-card.mg-card--app {
-  overflow: hidden;
-}
-.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-}
-.mg-card.mg-card--app.mg-card--fill {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-card__bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.3rem;
-  height: 100%;
-}

package/dist/collection/components/atoms/mg-character-left/mg-character-left.css

@@ -1,3 +0,0 @@
-mg-character-left {
-  display: block;
-}

package/dist/collection/components/atoms/mg-divider/mg-divider.css

@@ -1,9 +0,0 @@
-.mg-divider {
-  margin: var(--mg-divider-vertical-spacing) auto;
-  width: 12rem;
-  height: var(--mg-divider-thickness);
-  background-color: var(--mg-divider-background-color);
-}
-.mg-divider.mg-divider--full {
-  width: 100%;
-}

package/dist/collection/components/atoms/mg-icon/mg-icon.css

@@ -1,138 +0,0 @@
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.mg-icon {
-  color: currentColor;
-}
-.mg-icon[size=small], .mg-icon.mg-icon--size-small {
-  width: var(--mg-icon-small-size);
-  height: var(--mg-icon-small-size);
-}
-.mg-icon[size=small][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-small[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-small-size) / 2);
-}
-.mg-icon[size=regular], .mg-icon.mg-icon--size-regular {
-  width: var(--mg-icon-regular-size);
-  height: var(--mg-icon-regular-size);
-}
-.mg-icon[size=regular][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-regular[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-regular-size) / 2);
-}
-.mg-icon[size=medium], .mg-icon.mg-icon--size-medium {
-  width: var(--mg-icon-medium-size);
-  height: var(--mg-icon-medium-size);
-}
-.mg-icon[size=medium][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-medium[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-medium-size) / 2);
-}
-.mg-icon[size=large], .mg-icon.mg-icon--size-large {
-  width: var(--mg-icon-large-size);
-  height: var(--mg-icon-large-size);
-}
-.mg-icon[size=large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-large-size) / 2);
-}
-.mg-icon[size=extra-large], .mg-icon.mg-icon--size-extra-large {
-  width: var(--mg-icon-extra-large-size);
-  height: var(--mg-icon-extra-large-size);
-}
-.mg-icon[size=extra-large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-extra-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
-  padding: calc(var(--mg-icon-extra-large-size) / 2);
-}
-.mg-icon.mg-icon--variant-success.mg-icon--variant-style-icon {
-  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-}
-.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-icon {
-  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-}
-.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-icon {
-  color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-}
-.mg-icon.mg-icon--variant-info.mg-icon--variant-style-icon {
-  color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-}
-.mg-icon.mg-icon--variant-app.mg-icon--variant-style-icon {
-  color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-}
-.mg-icon.mg-icon--variant-success.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-info.mg-icon--variant-style-background {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-app.mg-icon--variant-style-background {
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-success.mg-icon--variant-style-full {
-  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-full {
-  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-full {
-  color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-info.mg-icon--variant-style-full {
-  color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-}
-.mg-icon.mg-icon--variant-app.mg-icon--variant-style-full {
-  color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
-  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
-}
-.mg-icon[class*=mg-icon--variant-] {
-  border-radius: var(--mg-icon-border-radius);
-}
-
-/**
-* Animations
-**/
-.mg-icon--spin {
-  animation-name: rotate;
-  animation-duration: 0.75s;
-  animation-iteration-count: infinite;
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/collection/components/atoms/mg-input-title/mg-input-title.css

@@ -1,12 +0,0 @@
-.is-asterisk {
-  color: hsl(var(--color-danger));
-}
-
-legend.mg-input-title {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.mg-input-title__required {
-  display: var(--mg-input-title-display, unset);
-}

package/dist/collection/components/atoms/mg-tag/mg-tag.css

@@ -1,131 +0,0 @@
-/* Variables */
-/* Mixins */
-/* Styles */
-.mg-tag {
-  padding: calc((var(--mg-tag-height) - 0.2rem - var(--mg-tag-font-size) * var(--line-height)) / 2) 0.6rem;
-  min-height: var(--mg-tag-height);
-  box-sizing: border-box;
-  border-radius: var(--mg-tag-border-radius);
-  border: 0.1rem solid;
-  font-size: var(--mg-tag-font-size);
-  font-weight: 600;
-  text-align: center;
-}
-.mg-tag.mg-tag--primary {
-  background-color: hsl(var(--color-dark));
-  border-color: hsl(var(--color-dark));
-  color: hsl(var(--color-light));
-}
-.mg-tag.mg-tag--primary.mg-tag--outline {
-  background-color: transparent;
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--primary.mg-tag--soft {
-  font-weight: 400;
-  background-color: hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));
-  border-color: hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon) {
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--secondary {
-  background-color: hsl(var(--color-light));
-  border-color: hsl(var(--color-light));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--secondary.mg-tag--outline {
-  background-color: transparent;
-  color: hsl(var(--color-light));
-}
-.mg-tag.mg-tag--secondary.mg-tag--soft {
-  font-weight: 400;
-  background-color: hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));
-  border-color: hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon) {
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--success {
-  background-color: hsl(var(--color-success));
-  border-color: hsl(var(--color-success));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--success.mg-tag--outline {
-  background-color: transparent;
-  color: hsl(var(--color-success));
-}
-.mg-tag.mg-tag--success.mg-tag--soft {
-  font-weight: 400;
-  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon) {
-  color: hsl(var(--color-success));
-}
-.mg-tag.mg-tag--warning {
-  background-color: hsl(var(--color-warning));
-  border-color: hsl(var(--color-warning));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--warning.mg-tag--outline {
-  background-color: transparent;
-  color: hsl(var(--color-warning));
-}
-.mg-tag.mg-tag--warning.mg-tag--soft {
-  font-weight: 400;
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon) {
-  color: hsl(var(--color-warning));
-}
-.mg-tag.mg-tag--danger {
-  background-color: hsl(var(--color-danger));
-  border-color: hsl(var(--color-danger));
-  color: hsl(var(--color-light));
-}
-.mg-tag.mg-tag--danger.mg-tag--outline {
-  background-color: transparent;
-  color: hsl(var(--color-danger));
-}
-.mg-tag.mg-tag--danger.mg-tag--soft {
-  font-weight: 400;
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-  border-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon) {
-  color: hsl(var(--color-danger));
-}
-.mg-tag.mg-tag--info {
-  background-color: hsl(var(--color-info));
-  border-color: hsl(var(--color-info));
-  color: hsl(var(--color-light));
-}
-.mg-tag.mg-tag--info.mg-tag--outline {
-  background-color: transparent;
-  color: hsl(var(--color-info));
-}
-.mg-tag.mg-tag--info.mg-tag--soft {
-  font-weight: 400;
-  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-  border-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
-  color: hsl(var(--color-dark));
-}
-.mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon) {
-  color: hsl(var(--color-info));
-}
-
-.mg-tag,
-mg-tag {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-::slotted(mg-icon) {
-  margin-right: 0.4rem;
-}