@charset "UTF-8";
/*
  @component tag
  @display Tag
  @chinese 标签
  @family data-display
*/
:root {
  /*
    tag
    ** 选择tag **
    ** normal 类型 **
  */
  --tag-selectable-solid-border-color: transparent;
  --tag-selectable-solid-border-color-hover: transparent;
  --tag-selectable-solid-border-color-active: transparent;
  --tag-selectable-solid-border-color-disabled: transparent;
  --tag-selectable-solid-border-color-selected: transparent;
  --tag-selectable-solid-border-color-selected-disabled: transparent;
  --tag-selectable-solid-background-color: var(--color-fill1-2);
  --tag-selectable-solid-background-color-hover: var(--color-fill1-2);
  --tag-selectable-solid-background-color-active: var(--color-fill1-3);
  --tag-selectable-solid-background-color-disabled: var(--color-fill1-1);
  --tag-selectable-solid-background-color-selected: var(--color-brand-3);
  --tag-selectable-solid-background-color-selected-disabled: var(--color-brand-1);
  --tag-selectable-solid-font-color: var(--color-text1-4);
  --tag-selectable-solid-font-color-hover: var(--color-text1-4);
  --tag-selectable-solid-font-color-active: var(--color-text1-3);
  --tag-selectable-solid-font-color-disabled: var(--color-text1-1);
  --tag-selectable-solid-font-color-selected: var(--color-white);
  --tag-selectable-solid-font-color-selected-disabled: var(--color-white);
  /*
    tag
    ** 选择tag **
    ** primary 类型 **
  */
  --tag-selectable-outline-border-color: var(--color-line1-4);
  --tag-selectable-outline-border-color-hover: var(--color-line1-4);
  --tag-selectable-outline-border-color-active: var(--color-line1-3);
  --tag-selectable-outline-border-color-disabled: var(--color-line1-1);
  --tag-selectable-outline-border-color-selected: var(--color-brand-3);
  --tag-selectable-outline-border-color-selected-disabled: var(--color-brand-1);
  --tag-selectable-outline-background-color: transparent;
  --tag-selectable-outline-background-color-hover: transparent;
  --tag-selectable-outline-background-color-active: transparent;
  --tag-selectable-outline-background-color-disabled: transparent;
  --tag-selectable-outline-background-color-selected-disabled: transparent;
  --tag-selectable-outline-font-color: var(--color-text1-4);
  --tag-selectable-outline-font-color-hover: var(--color-text1-4);
  --tag-selectable-outline-font-color-active: var(--color-text1-3);
  --tag-selectable-outline-font-color-disabled: var(--color-text1-1);
  --tag-selectable-outline-font-color-selected: var(--color-brand-3);
  --tag-selectable-outline-font-color-selected-disabled: var(--color-brand-1);
  --tag-selectable-outline-icon-background-color: var(--color-brand-3);
  --tag-selectable-outline-icon-background-color-hover: var(--color-brand-3);
  --tag-selectable-outline-icon-background-color-active: var(--color-brand-4);
  --tag-selectable-outline-icon-background-color-disabled: var(--color-brand-1);
  --tag-selectable-outline-icon-background-color-selected: var(--color-brand-1);
  --tag-selectable-outline-icon-background-color-selected-disabled: var(--color-brand-1);
  --tag-icon-selectable-outline-large-font-size: var(--s-5);
  --tag-icon-selectable-outline-medium-font-size: var(--s-4);
  --tag-icon-selectable-outline-small-font-size: var(--s-2);
  --tag-icon-selectable-outline-large-right: var(--s-5);
  --tag-icon-selectable-outline-medium-right: var(--s-4);
  --tag-icon-selectable-outline-small-right: var(--s-3);
  --tag-icon-selectable-outline-large-bottom: var(--s-5);
  --tag-icon-selectable-outline-medium-bottom: var(--s-4);
  --tag-icon-selectable-outline-small-bottom: var(--s-3);
  --tag-icon-selectable-outline-large-width: var(--s-10);
  --tag-icon-selectable-outline-medium-width: var(--s-8);
  --tag-icon-selectable-outline-small-width: var(--s-6);
  --tag-icon-selectable-outline-large-height: var(--s-10);
  --tag-icon-selectable-outline-medium-height: var(--s-8);
  --tag-icon-selectable-outline-small-height: var(--s-6);
  /*
    tag
    ** 删除tag **
    ** normal 类型 **
  */
  --tag-closable-solid-border-color-hover: transparent;
  --tag-closable-solid-border-color-active: transparent;
  --tag-closable-solid-border-color-disabled: transparent;
  --tag-closable-solid-background-color: var(--color-fill1-2);
  --tag-closable-solid-background-color-hover: var(--color-fill1-2);
  --tag-closable-solid-background-color-active: var(--color-fill1-4);
  --tag-closable-solid-background-color-disabled: var(--color-line1-1);
  --tag-closable-solid-font-color: var(--color-text1-4);
  --tag-closable-solid-font-color-hover: var(--color-text1-2);
  --tag-closable-solid-font-color-active: var(--color-text1-2);
  --tag-closable-solid-font-color-disabled: var(--color-text1-1);
  --tag-closable-solid-icon-color: var(--color-text1-4);
  --tag-closable-solid-icon-color-hover: var(--color-text1-3);
  --tag-closable-solid-icon-color-active: var(--color-text1-2);
  --tag-closable-solid-icon-color-disabled: var(--color-text1-1);
  /*
    tag
    ** 删除tag **
    ** primary 类型 **
  */
  --tag-closable-outline-border-color: var(--color-line1-4);
  --tag-closable-outline-border-color-active: var(--color-line1-3);
  --tag-closable-outline-border-color-disabled: var(--color-line1-1);
  --tag-closable-outline-font-color: var(--color-text1-4);
  --tag-closable-outline-font-color-disabled: var(--color-text1-1);
  --tag-closable-outline-background-color: transparent;
  --tag-closable-outline-background-color-disabled: transparent;
  --box-closable-outline-icon-color: var(--color-text1-4);
  --box-closable-outline-icon-color-hover: var(--color-text1-3);
  --box-closable-outline-icon-color-active: var(--color-text1-2);
  --box-closable-outline-icon-color-disabled: var(--color-text1-1);
  --tag-icon-closable-large-font-size: 5.6vw;
  --tag-icon-closable-medium-font-size: 4.8vw;
  --tag-icon-closable-small-font-size: 4vw;
  --tag-icon-closable-large-spacing: 3.2vw;
  --tag-icon-closable-medium-spacing: 2.1333333333333333vw;
  --tag-icon-closable-small-spacing: 1.0666666666666667vw;
  /*
   @desc motion type
   @namespace base/motion
   @semantic 动画类型
   @unconfigurable
 */
  --tag-motion-type: var(--motion-type-ease);
  /*
   @desc motion time
   @namespace base/motion
   @semantic 动画时长
   type string
   @unconfigurable
 */
  --tag-motion-time: var(--motion-time-2);
  /*
     @desc small-font-size
     @semantic 小号字体大小
     @namespace size/small
   */
  --tag-small-font-size: var(--p-body-1-font-size);
  /*
     @desc medium-font-size
     @semantic 中号字体大小
     @namespace size/medium
   */
  --tag-medium-font-size: var(--p-body-2-font-size);
  /*
     @desc large-font-size
     @semantic 大号字体大小
     @namespace size/large
   */
  --tag-large-font-size: var(--p-subhead-font-size);
  /*
     @desc tag-height
     @namespace size/small
     @semantic 自定义高度
     @type enum
     @enum size
     @configurable
     */
  --tag-small-height: calc(var(--box-small-padding-ver) * 2 + var(--tag-small-font-size));
  /*
       @desc border-width
       @semantic 边框宽度
       @namespace size/small
     */
  --tag-small-border-width: var(--box-small-border-width);
  /*
       @desc corner
       @semantic 圆角
       @namespace size/small
     */
  --tag-small-corner: var(--box-small-border-radius);
  /*
     @desc padding-lr
     @semantic 左右内边距
     @namespace size/small
     */
  --tag-small-padding-lr: var(--box-small-padding-hoz);
  /*
       @desc spacing
       @semantic 内部元素间隙
       @namespace size/small
     */
  --tag-small-spacing: var(--box-small-spacing);
  /*
     @desc tag-height
     @namespace size/medium
     @semantic 自定义高度
     @type enum
     @enum size
     @configurable
     */
  --tag-medium-height: calc(var(--box-medium-padding-ver) * 2 + var(--tag-medium-font-size));
  /*
       @desc border-width
       @semantic 边框宽度
       @namespace size/medium
     */
  --tag-medium-border-width: var(--box-medium-border-width);
  /*
       @desc corner
       @semantic 圆角
       @namespace size/medium
     */
  --tag-medium-corner: var(--box-medium-border-radius);
  /*
     @desc padding-lr
     @semantic 左右内边距
     @namespace size/medium
     */
  --tag-medium-padding-lr: var(--box-medium-padding-hoz);
  /*
       @desc spacing
       @semantic 内部元素间隙
       @namespace size/medium
     */
  --tag-medium-spacing: var(--box-medium-spacing);
  /*
     @desc tag-height
     @namespace size/large
     @semantic 自定义高度
     @type enum
     @enum size
     @configurable
     */
  --tag-large-height: calc(var(--box-large-padding-ver) * 2 + var(--tag-large-font-size));
  /*
       @desc border-width
       @semantic 边框宽度
       @namespace size/large
     */
  --tag-large-border-width: var(--box-large-border-width);
  /*
       @desc corner
       @semantic 圆角
       @namespace size/large
     */
  --tag-large-corner: var(--box-large-border-radius);
  /*
     @desc padding-lr
     @semantic 左右内边距
     @namespace size/large
     */
  --tag-large-padding-lr: var(--box-large-padding-hoz);
  /*
       @desc spacing
       @semantic 内部元素间隙
       @namespace size/large
     */
  --tag-large-spacing: var(--box-large-spacing);
  /*
          @desc border-color
          @namespace state/solid/solid
          @semantic 边框颜色
        */
  --tag-normal-solid-border-color: var(--box-normal-solid-border-color);
  /*
          @desc border-color-active
          @namespace state/normal/solid
          @semantic 边框颜色激活
        */
  --tag-normal-solid-border-color-active: var(--box-normal-solid-border-color-active);
  /*
          @desc border-color-disabled
          @namespace state/normal/solid
          @semantic 禁用边框颜色
        */
  --tag-normal-solid-border-color-disabled: var(--box-normal-solid-border-color-disabled);
  /*
          @desc border-color-active
          @namespace state/normal/solid
          @semantic 禁用边框颜色
        */
  --tag-normal-solid-border-color-selected: var(--box-normal-solid-border-color-active);
  /*
          @desc border-color-selected-disabled
          @namespace state/normal/solid
          @semantic 禁用选中边框颜色
        */
  --tag-normal-solid-border-color-selected-disabled: var(-box-normal-solid-border-color-disabled);
  /*
          @desc bg-color
          @namespace state/normal/solid
          @semantic 背景颜色
        */
  --tag-normal-solid-background-color: var(--box-normal-solid-background-color);
  /*
         @desc bg-color-active
         @namespace state/normal/solid
         @semantic 背景颜色激活
       */
  --tag-normal-solid-background-color-active: var(--box-normal-solid-background-color-active);
  /*
          @desc bg-color-disabled
          @namespace state/normal/solid
          @semantic 禁用背景颜色
        */
  --tag-normal-solid-background-color-disabled: var(--box-normal-solid-background-color-disabled);
  /*
          @desc background-color-selected
          @namespace state/normal/solid
          @semantic 背景颜色禁用选中
        */
  --tag-normal-solid-background-color-selected: var(--box-normal-solid-background-color-active);
  /*
          @desc background-color-selected-disabled
          @namespace state/normal/solid
          @semantic 禁用选中背景颜色
        */
  --tag-normal-solid-background-color-selected-disabled: var(
          --box-normal-solid-background-color-disabled
        );
  /*
          @desc font-color
          @namespace state/normal/solid
          @semantic 字体颜色
        */
  --tag-normal-solid-font-color: var(--box-normal-solid-font-color);
  /*
          @desc font-color-active
          @namespace state/normal/solid
          @semantic 字体颜色激活
        */
  --tag-normal-solid-font-color-active: var(--box-normal-solid-font-color-active);
  /*
          @desc font-color-disabled
          @namespace state/normal/solid
          @semantic 禁用字体颜色
        */
  --tag-normal-solid-font-color-disabled: var(--box-normal-solid-font-color-disabled);
  /*
          @desc font-color-select
          @namespace state/normal/solid
          @semantic 选中字体颜色
        */
  --tag-normal-solid-font-color-selected: var(--box-normal-solid-font-color-active);
  /*
          @desc font-color-selected-disabled
          @namespace state/normal/solid
          @semantic 禁用选中字体颜色
        */
  --tag-normal-solid-font-color-selected-disabled: var(--box-normal-solid-font-color-disabled);
  /*
          @desc icon-background-color
          @namespace state/normal/solid
          @semantic 选中背景颜色
        */
  --tag-normal-solid-icon-background-color: var(--box-normal-solid-icon-color);
  /*
          @desc icon-background-color-selected-disabled
          @namespace state/normal/solid
          @semantic 禁用选中icon背景颜色
        */
  --tag-normal-solid-icon-background-color-selected-disabled: var(
          --box-normal-solid-icon-color-disabled
        );
  /*
          @desc border-color
          @namespace state/outline/outline
          @semantic 边框颜色
        */
  --tag-normal-outline-border-color: var(--box-normal-outline-border-color);
  /*
          @desc border-color-active
          @namespace state/normal/outline
          @semantic 边框颜色激活
        */
  --tag-normal-outline-border-color-active: var(--box-normal-outline-border-color-active);
  /*
          @desc border-color-disabled
          @namespace state/normal/outline
          @semantic 禁用边框颜色
        */
  --tag-normal-outline-border-color-disabled: var(--box-normal-outline-border-color-disabled);
  /*
          @desc border-color-active
          @namespace state/normal/outline
          @semantic 禁用边框颜色
        */
  --tag-normal-outline-border-color-selected: var(--box-normal-outline-border-color-active);
  /*
          @desc border-color-selected-disabled
          @namespace state/normal/outline
          @semantic 禁用选中边框颜色
        */
  --tag-normal-outline-border-color-selected-disabled: var(-box-normal-outline-border-color-disabled);
  /*
          @desc bg-color
          @namespace state/normal/outline
          @semantic 背景颜色
        */
  --tag-normal-outline-background-color: var(--box-normal-outline-background-color);
  /*
         @desc bg-color-active
         @namespace state/normal/outline
         @semantic 背景颜色激活
       */
  --tag-normal-outline-background-color-active: var(--box-normal-outline-background-color-active);
  /*
          @desc bg-color-disabled
          @namespace state/normal/outline
          @semantic 禁用背景颜色
        */
  --tag-normal-outline-background-color-disabled: var(--box-normal-outline-background-color-disabled);
  /*
          @desc background-color-selected
          @namespace state/normal/outline
          @semantic 背景颜色禁用选中
        */
  --tag-normal-outline-background-color-selected: var(--box-normal-outline-background-color-active);
  /*
          @desc background-color-selected-disabled
          @namespace state/normal/outline
          @semantic 禁用选中背景颜色
        */
  --tag-normal-outline-background-color-selected-disabled: var(
          --box-normal-outline-background-color-disabled
        );
  /*
          @desc font-color
          @namespace state/normal/outline
          @semantic 字体颜色
        */
  --tag-normal-outline-font-color: var(--box-normal-outline-font-color);
  /*
          @desc font-color-active
          @namespace state/normal/outline
          @semantic 字体颜色激活
        */
  --tag-normal-outline-font-color-active: var(--box-normal-outline-font-color-active);
  /*
          @desc font-color-disabled
          @namespace state/normal/outline
          @semantic 禁用字体颜色
        */
  --tag-normal-outline-font-color-disabled: var(--box-normal-outline-font-color-disabled);
  /*
          @desc font-color-select
          @namespace state/normal/outline
          @semantic 选中字体颜色
        */
  --tag-normal-outline-font-color-selected: var(--box-normal-outline-font-color-active);
  /*
          @desc font-color-selected-disabled
          @namespace state/normal/outline
          @semantic 禁用选中字体颜色
        */
  --tag-normal-outline-font-color-selected-disabled: var(--box-normal-outline-font-color-disabled);
  /*
          @desc icon-background-color
          @namespace state/normal/outline
          @semantic 选中背景颜色
        */
  --tag-normal-outline-icon-background-color: var(--box-normal-outline-icon-color);
  /*
          @desc icon-background-color-selected-disabled
          @namespace state/normal/outline
          @semantic 禁用选中icon背景颜色
        */
  --tag-normal-outline-icon-background-color-selected-disabled: var(
          --box-normal-outline-icon-color-disabled
        ); }

@keyframes mt-tag-fade-in {
  0% {
    opacity: 0;
    transform: rotate(45deg) translateX(20px); }
  100% {
    opacity: 1;
    transform: rotate(45deg) translateX(0); } }

.mt-tag {
  display: inline-flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-style: solid;
  text-align: center;
  outline: none;
  transition: all var(--tag-motion-time) var(--tag-motion-type);
  overflow: hidden;
  /* state */ }
  .mt-tag--selectable-select {
    position: absolute;
    right: 0;
    bottom: 0; }
  .mt-tag--small {
    box-sizing: border-box;
    height: var(--tag-small-height);
    border-width: var(--tag-small-border-width);
    border-radius: var(--tag-small-corner);
    padding-left: var(--tag-small-padding-lr);
    padding-right: var(--tag-small-padding-lr);
    line-height: 1; }
  .mt-tag-icon--small-last {
    margin-left: var(--tag-small-spacing); }
  .mt-tag-icon--small-first {
    margin-right: var(--tag-small-spacing); }
  .mt-tag-font--small {
    font-size: var(--tag-small-font-size); }
  .mt-tag-icon--small-close {
    font-size: var(--tag-icon-closable-small-font-size);
    margin-left: var(--tag-icon-closable-small-spacing);
    line-height: 1;
    display: block; }
  .mt-tag-icon--small-select {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: var(--tag-icon-selectable-outline-small-font-size); }
    .mt-tag-icon--small-select:before {
      position: absolute;
      right: calc(-1 * var(--s-1) / 4);
      bottom: 0;
      z-index: calc(var(--elevation-1) + 1);
      line-height: 1;
      color: var(--color-white); }
    .mt-tag-icon--small-select:after {
      content: '';
      position: absolute;
      right: calc(-1 * var(--tag-icon-selectable-outline-small-right));
      bottom: calc(-1 * var(--tag-icon-selectable-outline-small-bottom));
      width: var(--tag-icon-selectable-outline-small-width);
      height: var(--tag-icon-selectable-outline-small-height);
      transform: rotate(45deg);
      background-color: var(--color-brand-3);
      z-index: var(--elevation-1);
      animation: mt-tag-fade-in 0.2s 0s linear; }
  .mt-tag--medium {
    box-sizing: border-box;
    height: var(--tag-medium-height);
    border-width: var(--tag-medium-border-width);
    border-radius: var(--tag-medium-corner);
    padding-left: var(--tag-medium-padding-lr);
    padding-right: var(--tag-medium-padding-lr);
    line-height: 1; }
  .mt-tag-icon--medium-last {
    margin-left: var(--tag-medium-spacing); }
  .mt-tag-icon--medium-first {
    margin-right: var(--tag-medium-spacing); }
  .mt-tag-font--medium {
    font-size: var(--tag-medium-font-size); }
  .mt-tag-icon--medium-close {
    font-size: var(--tag-icon-closable-medium-font-size);
    margin-left: var(--tag-icon-closable-medium-spacing);
    line-height: 1;
    display: block; }
  .mt-tag-icon--medium-select {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: var(--tag-icon-selectable-outline-medium-font-size); }
    .mt-tag-icon--medium-select:before {
      position: absolute;
      right: calc(-1 * var(--s-1) / 4);
      bottom: 0;
      z-index: calc(var(--elevation-1) + 1);
      line-height: 1;
      color: var(--color-white); }
    .mt-tag-icon--medium-select:after {
      content: '';
      position: absolute;
      right: calc(-1 * var(--tag-icon-selectable-outline-medium-right));
      bottom: calc(-1 * var(--tag-icon-selectable-outline-medium-bottom));
      width: var(--tag-icon-selectable-outline-medium-width);
      height: var(--tag-icon-selectable-outline-medium-height);
      transform: rotate(45deg);
      background-color: var(--color-brand-3);
      z-index: var(--elevation-1);
      animation: mt-tag-fade-in 0.2s 0s linear; }
  .mt-tag--large {
    box-sizing: border-box;
    height: var(--tag-large-height);
    border-width: var(--tag-large-border-width);
    border-radius: var(--tag-large-corner);
    padding-left: var(--tag-large-padding-lr);
    padding-right: var(--tag-large-padding-lr);
    line-height: 1; }
  .mt-tag-icon--large-last {
    margin-left: var(--tag-large-spacing); }
  .mt-tag-icon--large-first {
    margin-right: var(--tag-large-spacing); }
  .mt-tag-font--large {
    font-size: var(--tag-large-font-size); }
  .mt-tag-icon--large-close {
    font-size: var(--tag-icon-closable-large-font-size);
    margin-left: var(--tag-icon-closable-large-spacing);
    line-height: 1;
    display: block; }
  .mt-tag-icon--large-select {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: var(--tag-icon-selectable-outline-large-font-size); }
    .mt-tag-icon--large-select:before {
      position: absolute;
      right: calc(-1 * var(--s-1) / 4);
      bottom: 0;
      z-index: calc(var(--elevation-1) + 1);
      line-height: 1;
      color: var(--color-white); }
    .mt-tag-icon--large-select:after {
      content: '';
      position: absolute;
      right: calc(-1 * var(--tag-icon-selectable-outline-large-right));
      bottom: calc(-1 * var(--tag-icon-selectable-outline-large-bottom));
      width: var(--tag-icon-selectable-outline-large-width);
      height: var(--tag-icon-selectable-outline-large-height);
      transform: rotate(45deg);
      background-color: var(--color-brand-3);
      z-index: var(--elevation-1);
      animation: mt-tag-fade-in 0.2s 0s linear; }
  .mt-tag--normal-solid {
    border-color: var(--tag-normal-solid-border-color);
    background-color: var(--tag-normal-solid-background-color);
    color: var(--tag-normal-solid-font-color);
    border-width: 0; }
    .mt-tag--normal-solid:active {
      border-color: var(--tag-normal-solid-border-color-active);
      background-color: var(--tag-normal-solid-background-color-active);
      color: var(--tag-normal-solid-font-color-active);
      -webkit-tap-highlight-color: transparent; }
    .mt-tag--normal-solid-disabled:active, .mt-tag--normal-solid-disabled {
      border-color: var(--tag-normal-solid-border-color-disabled);
      background-color: var(--tag-normal-solid-background-color-disabled);
      color: var(--tag-normal-solid-font-color-disabled); }
    .mt-tag--normal-solid-selected:active, .mt-tag--normal-solid-selected {
      background-color: var(--tag-normal-solid-background-color-selected);
      border-color: var(--tag-normal-solid-border-color-selected);
      color: var(--tag-normal-solid-font-color-selected); }
    .mt-tag--normal-solid-selected-disabled:active, .mt-tag--normal-solid-selected-disabled {
      background-color: var(--tag-normal-solid-background-color-selected-disabled);
      border-color: var(--tag-normal-solid-border-color-selected-disabled);
      color: var(--tag-normal-solid-font-color-selected-disabled); }
    .mt-tag--normal-solid-icon-selected-disabled:after {
      background-color: var(--tag-normal-solid-icon-background-color-selected-disabled); }
  .mt-tag--normal-outline {
    border-color: var(--tag-normal-outline-border-color);
    background-color: var(--tag-normal-outline-background-color);
    color: var(--tag-normal-outline-font-color); }
    .mt-tag--normal-outline:active {
      border-color: var(--tag-normal-outline-border-color-active);
      background-color: var(--tag-normal-outline-background-color-active);
      color: var(--tag-normal-outline-font-color-active);
      -webkit-tap-highlight-color: transparent; }
    .mt-tag--normal-outline-disabled:active, .mt-tag--normal-outline-disabled {
      border-color: var(--tag-normal-outline-border-color-disabled);
      background-color: var(--tag-normal-outline-background-color-disabled);
      color: var(--tag-normal-outline-font-color-disabled); }
    .mt-tag--normal-outline-selected:active, .mt-tag--normal-outline-selected {
      background-color: var(--tag-normal-outline-background-color-selected);
      border-color: var(--tag-normal-outline-border-color-selected);
      color: var(--tag-normal-outline-font-color-selected); }
    .mt-tag--normal-outline-selected-disabled:active, .mt-tag--normal-outline-selected-disabled {
      background-color: var(--tag-normal-outline-background-color-selected-disabled);
      border-color: var(--tag-normal-outline-border-color-selected-disabled);
      color: var(--tag-normal-outline-font-color-selected-disabled); }
    .mt-tag--normal-outline-icon-selected-disabled:after {
      background-color: var(--tag-normal-outline-icon-background-color-selected-disabled); }
  .mt-tag--selectable-solid {
    border-color: var(--tag-selectable-solid-border-color);
    background-color: var(--tag-selectable-solid-background-color);
    color: var(--tag-selectable-solid-font-color);
    border-width: 0; }
    .mt-tag--selectable-solid:active {
      border-color: var(--tag-selectable-solid-border-color-active);
      background-color: var(--tag-selectable-solid-background-color-active);
      color: var(--tag-selectable-solid-font-color-active);
      -webkit-tap-highlight-color: transparent; }
    .mt-tag--selectable-solid-disabled:active, .mt-tag--selectable-solid-disabled {
      border-color: var(--tag-selectable-solid-border-color-disabled);
      background-color: var(--tag-selectable-solid-background-color-disabled);
      color: var(--tag-selectable-solid-font-color-disabled); }
    .mt-tag--selectable-solid-selected:active, .mt-tag--selectable-solid-selected {
      background-color: var(--tag-selectable-solid-background-color-selected);
      border-color: var(--tag-selectable-solid-border-color-selected);
      color: var(--tag-selectable-solid-font-color-selected); }
    .mt-tag--selectable-solid-selected-disabled:active, .mt-tag--selectable-solid-selected-disabled {
      background-color: var(--tag-selectable-solid-background-color-selected-disabled);
      border-color: var(--tag-selectable-solid-border-color-selected-disabled);
      color: var(--tag-selectable-solid-font-color-selected-disabled); }
    .mt-tag--selectable-solid-icon-selected-disabled:after {
      background-color: var(--tag-selectable-solid-icon-background-color-selected-disabled); }
  .mt-tag--selectable-outline {
    border-color: var(--tag-selectable-outline-border-color);
    background-color: var(--tag-selectable-outline-background-color);
    color: var(--tag-selectable-outline-font-color); }
    .mt-tag--selectable-outline:active {
      border-color: var(--tag-selectable-outline-border-color-active);
      background-color: var(--tag-selectable-outline-background-color-active);
      color: var(--tag-selectable-outline-font-color-active);
      -webkit-tap-highlight-color: transparent; }
    .mt-tag--selectable-outline-disabled:active, .mt-tag--selectable-outline-disabled {
      border-color: var(--tag-selectable-outline-border-color-disabled);
      background-color: var(--tag-selectable-outline-background-color-disabled);
      color: var(--tag-selectable-outline-font-color-disabled); }
    .mt-tag--selectable-outline-selected:active, .mt-tag--selectable-outline-selected {
      background-color: var(--tag-selectable-outline-background-color-selected);
      border-color: var(--tag-selectable-outline-border-color-selected);
      color: var(--tag-selectable-outline-font-color-selected); }
    .mt-tag--selectable-outline-selected-disabled:active, .mt-tag--selectable-outline-selected-disabled {
      background-color: var(--tag-selectable-outline-background-color-selected-disabled);
      border-color: var(--tag-selectable-outline-border-color-selected-disabled);
      color: var(--tag-selectable-outline-font-color-selected-disabled); }
    .mt-tag--selectable-outline-icon-selected-disabled:after {
      background-color: var(--tag-selectable-outline-icon-background-color-selected-disabled); }
  .mt-tag--closable-solid {
    border-color: var(--tag-closable-solid-border-color);
    background-color: var(--tag-closable-solid-background-color);
    color: var(--tag-closable-solid-font-color);
    border-width: 0; }
    .mt-tag--closable-solid:active {
      border-color: var(--tag-closable-solid-border-color-active);
      background-color: var(--tag-closable-solid-background-color-active);
      color: var(--tag-closable-solid-font-color-active);
      -webkit-tap-highlight-color: transparent; }
    .mt-tag--closable-solid-disabled:active, .mt-tag--closable-solid-disabled {
      border-color: var(--tag-closable-solid-border-color-disabled);
      background-color: var(--tag-closable-solid-background-color-disabled);
      color: var(--tag-closable-solid-font-color-disabled); }
    .mt-tag--closable-solid-selected:active, .mt-tag--closable-solid-selected {
      background-color: var(--tag-closable-solid-background-color-selected);
      border-color: var(--tag-closable-solid-border-color-selected);
      color: var(--tag-closable-solid-font-color-selected); }
    .mt-tag--closable-solid-selected-disabled:active, .mt-tag--closable-solid-selected-disabled {
      background-color: var(--tag-closable-solid-background-color-selected-disabled);
      border-color: var(--tag-closable-solid-border-color-selected-disabled);
      color: var(--tag-closable-solid-font-color-selected-disabled); }
    .mt-tag--closable-solid-icon-selected-disabled:after {
      background-color: var(--tag-closable-solid-icon-background-color-selected-disabled); }
  .mt-tag--closable-outline {
    border-color: var(--tag-closable-outline-border-color);
    background-color: var(--tag-closable-outline-background-color);
    color: var(--tag-closable-outline-font-color); }
    .mt-tag--closable-outline:active {
      border-color: var(--tag-closable-outline-border-color-active);
      background-color: var(--tag-closable-outline-background-color-active);
      color: var(--tag-closable-outline-font-color-active);
      -webkit-tap-highlight-color: transparent; }
    .mt-tag--closable-outline-disabled:active, .mt-tag--closable-outline-disabled {
      border-color: var(--tag-closable-outline-border-color-disabled);
      background-color: var(--tag-closable-outline-background-color-disabled);
      color: var(--tag-closable-outline-font-color-disabled); }
    .mt-tag--closable-outline-selected:active, .mt-tag--closable-outline-selected {
      background-color: var(--tag-closable-outline-background-color-selected);
      border-color: var(--tag-closable-outline-border-color-selected);
      color: var(--tag-closable-outline-font-color-selected); }
    .mt-tag--closable-outline-selected-disabled:active, .mt-tag--closable-outline-selected-disabled {
      background-color: var(--tag-closable-outline-background-color-selected-disabled);
      border-color: var(--tag-closable-outline-border-color-selected-disabled);
      color: var(--tag-closable-outline-font-color-selected-disabled); }
    .mt-tag--closable-outline-icon-selected-disabled:after {
      background-color: var(--tag-closable-outline-icon-background-color-selected-disabled); }
