tdesign-mobile-vue/dist/plugin.css

tdesign-mobile-vue

.t-float-left {
  float: left;
}
.t-float-right {
  float: right;
}
@-webkit-keyframes t-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes t-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes t-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes t-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes t-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes t-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes t-slide-top-in {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-top-in {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-top-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes t-slide-top-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes t-slide-bottom-in {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-bottom-in {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-bottom-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes t-slide-bottom-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes t-slide-right-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-right-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@keyframes t-slide-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes t-slide-left-in {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-left-in {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes t-slide-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes t-fade-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes t-fade-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@-webkit-keyframes t-fade-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
}
@keyframes t-fade-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
}
@keyframes t-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.t-icon-loading {
  -webkit-animation: t-spin 1s linear infinite;
          animation: t-spin 1s linear infinite;
}
.hotspot-expanded.relative {
  position: relative;
}
.hotspot-expanded::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.t-action-sheet__content {
  color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 12px));
  border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 12px));
  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
  overflow: hidden;
}
.t-action-sheet__content--grid {
  padding-top: 8px;
}
.t-action-sheet__content:focus {
  outline: 0;
}
.t-action-sheet__grid {
  padding-bottom: 8px;
}
.t-action-sheet__grid--swiper {
  padding-bottom: 0;
}
.t-action-sheet__description {
  color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
  line-height: 22px;
  font-size: 14px;
  text-align: var(--td-action-sheet-text-align, center);
  padding: 12px 16px;
  position: relative;
}
.t-action-sheet__description::after {
  content: "";
  display: block;
  position: absolute;
  top: unset;
  bottom: 0;
  left: unset;
  right: unset;
  background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__description::after {
  height: 1px;
  left: 0;
  right: 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.t-action-sheet__description--left {
  text-align: left;
}
.t-action-sheet__description--left::after {
  left: 16px;
}
.t-action-sheet__description--grid {
  line-height: 34px;
}
.t-action-sheet__description--grid::after {
  display: none;
}
.t-action-sheet__list-item {
  border: none;
  height: var(--td-action-sheet-list-item-height, 56px);
  padding: 0 16px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.t-action-sheet__list-item::after {
  content: "";
  display: block;
  position: absolute;
  top: unset;
  bottom: 0;
  left: unset;
  right: unset;
  background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
}
.t-action-sheet__list-item::after {
  height: 1px;
  left: 0;
  right: 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.t-action-sheet__list-item--left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  text-align: left;
}
.t-action-sheet__list-item--left::after {
  left: 16px;
}
.t-action-sheet__list-item--disabled {
  --td-button-default-disabled-bg: none;
  --td-button-default-disabled-color: var(--td-action-sheet-list-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-action-sheet__list-item-text {
  font-size: var(--td-font-size-m, 16px);
  font-weight: var(--td-action-sheet-text-weight, 400);
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-action-sheet__list-item-icon {
  margin-right: 8px;
}
.t-action-sheet__swiper-wrap {
  margin-top: 8px;
  padding-bottom: 24px;
  position: relative;
}
.t-action-sheet__swiper-wrap .t-swiper__pagination .t-swiper-dot {
  background-color: var(--td-action-sheet-dot-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
}
.t-action-sheet__swiper-wrap .t-swiper__pagination .t-swiper-dot--active {
  background-color: var(--td-action-sheet-dot-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
}
.t-action-sheet__footer {
  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-action-sheet__gap-list {
  height: 8px;
  background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7))));
}
.t-action-sheet__gap-grid {
  height: 0.5px;
  background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7))));
}
.t-action-sheet__cancel {
  height: var(--td-action-sheet-cancel-height, 48px);
  border: none;
  border-radius: 0;
  font-weight: var(--td-action-sheet-text-weight, 400);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.t-action-sheet__cancel::after {
  border-radius: 0;
}
.t-action-sheet__dots {
  --td-swiper-nav-dot-color: var(--td-action-sheet-dot-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
  --td-swiper-nav-dot-size: var(--td-action-sheet-dot-size, 8px);
  --td-swiper-nav-dot-active-color: var(--td-action-sheet-dot-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
}
.t-dialog {
  overflow: hidden;
  width: var(--td-dialog-width, 311px);
  border-radius: var(--td-dialog-border-radius, var(--td-radius-extra-large, 12px));
  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-dialog__wrapper {
  --td-popup-border-radius: var(--td-dialog-border-radius, var(--td-radius-extra-large, 12px));
}
.t-dialog__close-btn {
  position: absolute;
  top: var(--td-spacer, 8px);
  right: var(--td-spacer, 8px);
  font-size: var(--td-dialog-close-font-size, 22px);
  color: var(--td-dialog-close-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-dialog__content {
  padding: var(--td-spacer-3, 24px) var(--td-spacer-3, 24px) 0;
  max-height: var(--td-dialog-body-max-height, 456px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: var(--td-font-size-m, 16px);
}
.t-dialog__content:empty {
  display: none;
}
.t-dialog__header {
  text-align: center;
  font-weight: bold;
  font-size: var(--td-dialog-title-font-size, 18px);
  line-height: var(--td-dialog-title-line-height, 26px);
  color: var(--td-dialog-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-dialog__header + .t-dialog__body {
  margin-top: var(--td-spacer, 8px);
}
.t-dialog__body {
  overflow-y: scroll;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  font-size: var(--td-dialog-content-font-size, 16px);
  color: var(--td-dialog-content-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
  line-height: var(--td-dialog-content-line-height, 24px);
}
.t-dialog__body-text {
  word-wrap: break-word;
}
.t-dialog__body--left {
  text-align: left;
}
.t-dialog__body--right {
  text-align: right;
}
.t-dialog__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--td-spacer-3, 24px);
}
.t-dialog__footer--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-flow: column-reverse;
          flex-flow: column-reverse;
}
.t-dialog__footer--column .t-dialog__button {
  width: 100%;
  -webkit-box-flex: unset;
      -ms-flex: unset;
          flex: unset;
}
.t-dialog__footer--full {
  padding: var(--td-spacer-4, 32px) 0 0;
}
.t-dialog__button {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-dialog__button--horizontal + .t-dialog__button--horizontal {
  margin-left: var(--td-spacer-1, 12px);
}
.t-dialog__button--vertical + .t-dialog__button--vertical {
  margin-bottom: var(--td-spacer-1, 12px);
}
.t-dialog__button--text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  --td-button-border-radius: 0;
  --td-button-medium-height: 56px;
  border-radius: 0;
}
.t-dialog__button--text::before {
  content: " ";
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 0;
  left: 0;
  border-top: 1px solid var(--td-border-color, var(--td-gray-color-3, #e7e7e7));
  border-left: 1px solid var(--td-border-color, var(--td-gray-color-3, #e7e7e7));
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  width: 200%;
  height: 200%;
  border-radius: 0;
}
.t-loading {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 12px;
}
.t-loading__spinner {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -webkit-animation: rotate 0.8s linear infinite;
          animation: rotate 0.8s linear infinite;
  color: var(--td-loading-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
}
.t-loading__spinner.reverse {
  -webkit-animation-name: rotateReverse;
          animation-name: rotateReverse;
}
.t-loading__spinner--spinner {
  -webkit-animation-timing-function: steps(12);
          animation-timing-function: steps(12);
  color: var(--td-loading-spinner-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
}
.t-loading__spinner--spinner .t-loading__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.t-loading__spinner--spinner .t-loading__dot::before {
  display: block;
  width: 2.5px;
  height: 25%;
  margin: 0 auto;
  background-color: currentColor;
  border-radius: 40%;
  content: " ";
}
.t-loading__spinner--circular .t-loading__circular {
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, currentColor 330deg, rgba(255, 255, 255, 0) 360deg);
  mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
  /* stylelint-disable-next-line */
  -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
}
.t-loading__spinner--dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: none;
          animation: none;
}
.t-loading__spinner--dots .t-loading__dot {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-color: currentColor;
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  -webkit-animation-name: dotting;
          animation-name: dotting;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.t-loading__text {
  font-size: var(--td-loading-text-font-size, 12px);
  line-height: var(--td-loading-text-line-height, 20px);
}
.t-loading__text--vertical:not(:first-child):not(:empty) {
  margin-top: 6px;
}
.t-loading__text--horizontal:not(:first-child):not(:empty) {
  margin-left: 8px;
}
.t-loading--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.t-loading--horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  vertical-align: top;
}
@-webkit-keyframes t-bar {
  0% {
    width: 0;
  }
  50% {
    width: 70%;
  }
  100% {
    width: 80%;
  }
}
@keyframes t-bar {
  0% {
    width: 0;
  }
  50% {
    width: 70%;
  }
  100% {
    width: 80%;
  }
}
@-webkit-keyframes t-bar-loaded {
  0% {
    height: 3px;
    opacity: 1;
    width: 90%;
  }
  50% {
    height: 3px;
    opacity: 1;
    width: 100%;
  }
  100% {
    height: 0;
    opacity: 0;
    width: 100%;
  }
}
@keyframes t-bar-loaded {
  0% {
    height: 3px;
    opacity: 1;
    width: 90%;
  }
  50% {
    height: 3px;
    opacity: 1;
    width: 100%;
  }
  100% {
    height: 0;
    opacity: 0;
    width: 100%;
  }
}
.t-loading__dot:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  opacity: 0;
}
.t-loading__dot:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  opacity: 0.08333333;
}
.t-loading__dot:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  opacity: 0.16666667;
}
.t-loading__dot:nth-of-type(4) {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
  opacity: 0.25;
}
.t-loading__dot:nth-of-type(5) {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
  opacity: 0.33333333;
}
.t-loading__dot:nth-of-type(6) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 0.41666667;
}
.t-loading__dot:nth-of-type(7) {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
  opacity: 0.5;
}
.t-loading__dot:nth-of-type(8) {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
  opacity: 0.58333333;
}
.t-loading__dot:nth-of-type(9) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  opacity: 0.66666667;
}
.t-loading__dot:nth-of-type(10) {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
  opacity: 0.75;
}
.t-loading__dot:nth-of-type(11) {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
  opacity: 0.83333333;
}
.t-loading__dot:nth-of-type(12) {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  opacity: 0.91666667;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateReverse {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes rotateReverse {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes dotting {
  0% {
    opacity: 0.15;
  }
  1% {
    opacity: 0.8;
  }
  33% {
    opacity: 0.8;
  }
  34% {
    opacity: 0.15;
  }
  100% {
    opacity: 0.15;
  }
}
@keyframes dotting {
  0% {
    opacity: 0.15;
  }
  1% {
    opacity: 0.8;
  }
  33% {
    opacity: 0.8;
  }
  34% {
    opacity: 0.15;
  }
  100% {
    opacity: 0.15;
  }
}
.t-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  min-height: 48px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 15000;
  padding: 12px 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: var(--td-message-border-radius, var(--td-radius-default, 6px));
  line-height: 1em;
  background-color: var(--td-message-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
  -webkit-box-shadow: var(--td-message-box-shadow, var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06)));
          box-shadow: var(--td-message-box-shadow, var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06)));
}
.t-message__text {
  color: var(--td-message-content-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
  font-size: var(--td-font-size-base, 14px);
  line-height: 22px;
}
.t-message__text-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.t-message__text-nowrap {
  word-break: keep-all;
  white-space: nowrap;
}
.t-message__icon--left,
.t-message__close-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.t-message--info {
  color: var(--td-message-info-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9)));
}
.t-message--success {
  color: var(--td-message-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
}
.t-message--warning {
  color: var(--td-message-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
}
.t-message--error {
  color: var(--td-message-error-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
}
.t-message__icon--left,
.t-message__icon--right {
  font-size: 22px;
}
.t-message__icon--left:not(:empty) {
  margin-right: var(--td-spacer, 8px);
}
.t-message__icon--right {
  color: var(--td-message-close-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
}
.t-message__icon--right:not(:empty),
.t-message__link {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin-left: var(--td-spacer, 8px);
}
.message-enter-active {
  -webkit-animation: messageEnter 0.5s;
          animation: messageEnter 0.5s;
}
.message-leave-active {
  -webkit-animation: messageOut 0.2s;
          animation: messageOut 0.2s;
}
@-webkit-keyframes messageEnter {
  from {
    -webkit-transform: translate3d(0, -48px, 0);
            transform: translate3d(0, -48px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes messageEnter {
  from {
    -webkit-transform: translate3d(0, -48px, 0);
            transform: translate3d(0, -48px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes messageOut {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -48px, 0);
            transform: translate3d(0, -48px, 0);
  }
}
@keyframes messageOut {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -48px, 0);
            transform: translate3d(0, -48px, 0);
  }
}
.t-toast {
  position: fixed;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 12001;
  opacity: 1;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
  background-color: var(--td-toast-bg-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  border-radius: var(--td-toast-radius, 4px);
  font-size: 14px;
  color: var(--td-toast-color, var(--td-font-white-1, #ffffff));
  max-width: var(--td-toast-max-width, 185px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.t-toast--column {
  padding: 24px;
  min-width: 80px;
  min-height: 80px;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.t-toast--loading.t-toast--with-text {
  min-width: 102px;
  min-height: 102px;
  padding-top: 0;
  padding-bottom: 0;
}
.t-toast__content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 22px;
}
.t-toast__content--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  padding: 14px 22px;
}
.t-toast__content--column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.t-toast__icon--row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--td-toast-row-icon-size, 24px);
}
.t-toast__icon--column {
  font-size: var(--td-toast-column-icon-size, 32px);
}
.t-toast__text {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  /* stylelint-disable-next-line */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: pre-line;
}
.t-toast__text--column:not(:empty):not(:only-child) {
  margin-top: 8px;
  min-width: 64px;
}
.t-toast__text--row:not(:empty):not(:only-child) {
  margin-left: 8px;
}
.t-toast.t-fade-enter,
.t-toast.t-fade-leave-to {
  opacity: 0;
}
.t-toast--lock {
  overflow: hidden;
  cursor: not-allowed;
}
.t-toast--lock * {
  pointer-events: none;
}