tdesign-react 0.45.6-alpha.1 → 0.45.6-alpha.2

package/es/steps/style/index.css

@@ -1 +1,662 @@
-.default-step-icon{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;width:22px;height:22px;text-align:center;border-radius:var(--td-radius-circle);font-size:var(--td-font-size-body-large)}.t-steps{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.t-steps .t-steps-item{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;vertical-align:top;margin-right:var(--td-comp-margin-s);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.t-steps .t-steps-item:last-child{-webkit-box-flex:0;-ms-flex:none;flex:none}.t-steps .t-steps-item__inner{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.t-steps .t-steps-item__inner.t-steps-item--clickable{cursor:pointer}.t-steps .t-steps-item--finish .t-steps-item__icon .t-icon{color:var(--td-brand-color)}.t-steps .t-steps-item--finish .t-steps-item__icon--number{border-color:var(--td-brand-color)}.t-steps .t-steps-item--finish .t-steps-item__title{color:var(--td-text-color-primary);font-weight:400}.t-steps .t-steps-item--finish .t-steps-item__description{color:var(--td-text-color-secondary)}.t-steps .t-steps-item--process .t-steps-item__icon .t-icon{color:var(--td-brand-color)}.t-steps .t-steps-item--process .t-steps-item__icon--number{border-color:var(--td-brand-color);background-color:var(--td-brand-color);color:var(--td-text-color-anti);font-weight:700}.t-steps .t-steps-item--process .t-steps-item__title{color:var(--td-brand-color);font-weight:700}.t-steps .t-steps-item--process .t-steps-item__description{color:var(--td-text-color-secondary)}.t-steps .t-steps-item--error .t-steps-item__icon .t-icon{color:var(--td-error-color)}.t-steps .t-steps-item--error .t-steps-item__icon--number{color:var(--td-error-color);border-color:var(--td-error-color)}.t-steps .t-steps-item--error .t-steps-item__title{color:var(--td-error-color)}.t-steps .t-steps-item--error .t-steps-item__description{color:var(--td-text-color-secondary)}.t-steps .t-steps-item__icon{vertical-align:top;font-size:var(--td-font-size-body-medium);margin-right:var(--td-comp-margin-s);color:var(--td-text-color-placeholder)}.t-steps .t-steps-item__icon--number{color:var(--td-text-color-placeholder);border:1px solid var(--td-text-color-placeholder);border-radius:var(--td-radius-circle)}.t-steps .t-steps-item__icon--finish,.t-steps .t-steps-item__icon--number{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;width:22px;height:22px;text-align:center;font-size:var(--td-font-size-body-large)}.t-steps .t-steps-item__icon--finish{border:1px solid var(--td-brand-color);border-radius:var(--td-radius-circle)}.t-steps .t-steps-item__icon--error{border:1px solid var(--td-error-color);color:#000;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;width:22px;height:22px;text-align:center;border-radius:var(--td-radius-circle);font-size:var(--td-font-size-body-large)}.t-steps .t-steps-item__icon>.t-icon{font-size:calc(var(--td-font-size-body-medium) + 10px)}.t-steps .t-steps-item__title{position:relative;padding-right:var(--td-comp-margin-s);color:var(--td-text-color-placeholder);font-size:var(--td-font-size-body-large);line-height:24px}.t-steps .t-steps-item__description{color:var(--td-text-color-placeholder);font-size:var(--td-font-size-body-medium);margin-bottom:var(--td-comp-margin-xs);line-height:22px}.t-steps--line-separator .t-steps-item:after,.t-steps--line-separator .t-steps-item:before,.t-steps--line-separator .t-steps-item__title:after{border-style:solid}.t-steps--dashed-separator .t-steps-item:after,.t-steps--dashed-separator .t-steps-item:before,.t-steps--dashed-separator .t-steps-item__title:after{border-style:dashed}.t-steps--horizontal.t-steps--default-anchor .t-steps-item__title{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-bottom:var(--td-comp-margin-xs)}.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number{width:22px;height:22px}.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon>.t-icon{font-size:calc(var(--td-font-size-body-medium) + 10px)}.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title:after{content:"";display:block;width:9999px;border-left:0;border-top:0;border-bottom-width:1px;border-bottom-color:var(--td-text-color-placeholder);position:absolute;left:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):after{-webkit-box-flex:1;-ms-flex:1;flex:1;height:24px;content:"^";-webkit-transform:rotate(90deg);transform:rotate(90deg);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border:0;font-size:var(--td-font-size-body-large);color:var(--td-text-color-placeholder)}.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):after{color:var(--td-brand-color)}.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title:after{border-bottom-width:2px;border-bottom-color:var(--td-brand-color);color:var(--td-brand-color)}.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title:after{content:"";display:block;width:9999px;border-left:0;border-top:0;border-bottom-width:1px;border-bottom-color:var(--td-text-color-placeholder);position:absolute;left:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after{-webkit-box-flex:1;-ms-flex:1;flex:1;height:24px;content:"^";-webkit-transform:rotate(90deg);transform:rotate(90deg);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border:0;font-size:var(--td-font-size-body-large);color:var(--td-text-color-placeholder)}.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):after{color:var(--td-brand-color)}.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):after,.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child):after{color:var(--td-brand-color)}.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after,.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title:after{border-bottom-width:2px;border-bottom-color:var(--td-brand-color);color:var(--td-brand-color)}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item{overflow:visible}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title{padding-right:0;margin-bottom:var(--td-comp-margin-xs)}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon{border-color:var(--td-brand-color)}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon{background:var(--td-brand-color);border-color:var(--td-brand-color)}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon{background:var(--td-error-color);border-color:var(--td-error-color)}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__inner{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-align:center;-ms-flex-align:center;align-items:center}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon{display:block;width:8px;height:8px;border:2px solid var(--td-text-color-placeholder);border-radius:var(--td-radius-circle);margin-bottom:var(--td-comp-margin-xs);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content{text-align:center;width:140px}.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):after{-webkit-box-flex:1;-ms-flex:1;flex:1;content:"^";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border:0;font-size:var(--td-font-size-body-large);-webkit-transform:rotate(90deg);transform:rotate(90deg);color:var(--td-text-color-placeholder)}.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):after{color:var(--td-brand-color)}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child):after{content:"";display:block;width:calc(100% - 16px);border-left:0;border-top:0;border-bottom-width:1px;border-bottom-color:var(--td-text-color-placeholder);position:absolute;left:78px;top:2.5px}.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child):after{color:var(--td-brand-color);border-bottom-color:var(--td-brand-color);border-bottom-width:2px}.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after{-webkit-box-flex:1;-ms-flex:1;flex:1;content:"^";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border:0;font-size:var(--td-font-size-body-large);-webkit-transform:rotate(90deg);transform:rotate(90deg);color:var(--td-text-color-placeholder)}.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):after{color:var(--td-brand-color)}.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):after,.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child):after{color:var(--td-brand-color)}.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child):after{content:"";display:block;width:calc(100% - 16px);border-left:0;border-top:0;border-bottom-width:1px;border-bottom-color:var(--td-text-color-placeholder);position:absolute;left:78px;top:2.5px}.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child):after,.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child):after{color:var(--td-brand-color);border-bottom-color:var(--td-brand-color);border-bottom-width:2px}.t-steps--vertical{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child):before{content:"^";border:0;height:calc(100% - 24px);position:absolute;top:24px;left:6px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--td-font-size-body-large);-webkit-transform:rotate(180deg);transform:rotate(180deg);color:var(--td-text-color-placeholder)}.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):before{color:var(--td-brand-color)}.t-steps--vertical.t-steps--positive .t-steps-item{padding-bottom:var(--td-comp-margin-xxl);margin-bottom:5px}.t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child):before{content:"";display:block;height:100%;border-left:0;border-top:0;border-right-width:1px;border-right-color:var(--td-text-color-placeholder);position:absolute;top:35px;left:11px}.t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child):before{border-right-width:2px;border-right-color:var(--td-brand-color);color:var(--td-brand-color)}.t-steps--vertical.t-steps--default-anchor .t-steps-item__content{margin-top:var(--td-comp-margin-xxs);margin-left:0}.t-steps--vertical.t-steps--default-anchor .t-steps-item__title{margin-bottom:var(--td-comp-margin-xs)}.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child):before{content:"^";border:0;height:calc(100% - 4px);position:absolute;top:8px;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--td-font-size-body-medium);color:var(--td-text-color-placeholder)}.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):before{color:var(--td-brand-color)}.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child):before{content:"";display:block;height:100%;border-bottom:0;border-left:0;border-right-width:1px;border-right-color:var(--td-text-color-placeholder);position:absolute;left:3.5px;top:17px}.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child):before{color:var(--td-brand-color);border-right-color:var(--td-brand-color);border-right-width:2px}.t-steps--vertical.t-steps--dot-anchor .t-steps-item{margin-bottom:0}.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon{border-color:var(--td-brand-color)}.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon{background:var(--td-brand-color);border-color:var(--td-brand-color)}.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon{background:var(--td-error-color);border-color:var(--td-error-color)}.t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon{display:block;width:8px;height:8px;border:2px solid var(--td-text-color-placeholder);border-radius:var(--td-radius-circle);margin-bottom:var(--td-comp-margin-xs);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;top:5px}.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):before{content:"^";border:0;height:calc(100% - 24px);position:absolute;top:24px;left:6px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--td-font-size-body-large);-webkit-transform:rotate(180deg);transform:rotate(180deg);color:var(--td-text-color-placeholder)}.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):before{color:var(--td-brand-color)}.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):before{-webkit-transform:rotate(0);transform:rotate(0);margin-top:var(--td-comp-margin-xs)}.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):before,.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child):before{color:var(--td-brand-color)}.t-steps--vertical.t-steps--reverse .t-steps-item{padding-bottom:var(--td-comp-margin-xxl);margin-bottom:5px}.t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child):before{content:"";display:block;height:100%;border-left:0;border-bottom:0;border-right-width:1px;border-right-color:var(--td-text-color-placeholder);position:absolute;top:35px;left:11px}.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child):before,.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child):before{border-right-width:2px;border-right-color:var(--td-brand-color);color:var(--td-brand-color)}.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):before{content:"^";border:0;height:calc(100% - 4px);position:absolute;top:8px;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--td-font-size-body-medium);color:var(--td-text-color-placeholder)}.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child):before,.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child):before{color:var(--td-brand-color)}.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item{margin-bottom:0}.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child):before{content:"";display:block;height:100%;border-bottom:0;border-left:0;border-right-width:1px;border-right-color:var(--td-text-color-placeholder);position:absolute;left:3.5px;top:17px}.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child:before{display:none}.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child):before,.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child):before{border-right-width:2px;border-right-color:var(--td-brand-color);color:var(--td-brand-color)}
+.default-step-icon {
+  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;
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  border-radius: var(--td-radius-circle);
+  font-size: var(--td-font-size-body-large);
+}
+.t-steps {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+}
+.t-steps .t-steps-item {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  overflow: hidden;
+  vertical-align: top;
+  margin-right: var(--td-comp-margin-s);
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-steps .t-steps-item:last-child {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+}
+.t-steps .t-steps-item__inner {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-steps .t-steps-item__inner.t-steps-item--clickable {
+  cursor: pointer;
+}
+.t-steps .t-steps-item--finish .t-steps-item__icon .t-icon {
+  color: var(--td-brand-color);
+}
+.t-steps .t-steps-item--finish .t-steps-item__icon--number {
+  border-color: var(--td-brand-color);
+}
+.t-steps .t-steps-item--finish .t-steps-item__title {
+  color: var(--td-text-color-primary);
+  font-weight: normal;
+}
+.t-steps .t-steps-item--finish .t-steps-item__description {
+  color: var(--td-text-color-secondary);
+}
+.t-steps .t-steps-item--process .t-steps-item__icon .t-icon {
+  color: var(--td-brand-color);
+}
+.t-steps .t-steps-item--process .t-steps-item__icon--number {
+  border-color: var(--td-brand-color);
+  background-color: var(--td-brand-color);
+  color: var(--td-text-color-anti);
+  font-weight: bold;
+}
+.t-steps .t-steps-item--process .t-steps-item__title {
+  color: var(--td-brand-color);
+  font-weight: bold;
+}
+.t-steps .t-steps-item--process .t-steps-item__description {
+  color: var(--td-text-color-secondary);
+}
+.t-steps .t-steps-item--error .t-steps-item__icon .t-icon {
+  color: var(--td-error-color);
+}
+.t-steps .t-steps-item--error .t-steps-item__icon--number {
+  color: var(--td-error-color);
+  border-color: var(--td-error-color);
+}
+.t-steps .t-steps-item--error .t-steps-item__title {
+  color: var(--td-error-color);
+}
+.t-steps .t-steps-item--error .t-steps-item__description {
+  color: var(--td-text-color-secondary);
+}
+.t-steps .t-steps-item__icon {
+  vertical-align: top;
+  font-size: var(--td-font-size-body-medium);
+  margin-right: var(--td-comp-margin-s);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps .t-steps-item__icon--number {
+  color: var(--td-text-color-placeholder);
+  border: 1px solid var(--td-text-color-placeholder);
+  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;
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  border-radius: var(--td-radius-circle);
+  font-size: var(--td-font-size-body-large);
+}
+.t-steps .t-steps-item__icon--finish {
+  border: 1px solid var(--td-brand-color);
+  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;
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  border-radius: var(--td-radius-circle);
+  font-size: var(--td-font-size-body-large);
+}
+.t-steps .t-steps-item__icon--error {
+  border: 1px solid var(--td-error-color);
+  color: #000;
+  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;
+  width: 22px;
+  height: 22px;
+  text-align: center;
+  border-radius: var(--td-radius-circle);
+  font-size: var(--td-font-size-body-large);
+}
+.t-steps .t-steps-item__icon > .t-icon {
+  font-size: calc(var(--td-font-size-body-medium) + 10px);
+}
+.t-steps .t-steps-item__title {
+  position: relative;
+  padding-right: var(--td-comp-margin-s);
+  color: var(--td-text-color-placeholder);
+  font-size: var(--td-font-size-body-large);
+  line-height: 24px;
+}
+.t-steps .t-steps-item__description {
+  color: var(--td-text-color-placeholder);
+  font-size: var(--td-font-size-body-medium);
+  margin-bottom: var(--td-comp-margin-xs);
+  line-height: 22px;
+}
+.t-steps--line-separator .t-steps-item:before,
+.t-steps--line-separator .t-steps-item:after,
+.t-steps--line-separator .t-steps-item__title:after {
+  border-style: solid;
+}
+.t-steps--dashed-separator .t-steps-item:before,
+.t-steps--dashed-separator .t-steps-item:after,
+.t-steps--dashed-separator .t-steps-item__title:after {
+  border-style: dashed;
+}
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__title {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-bottom: var(--td-comp-margin-xs);
+}
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number {
+  width: 22px;
+  height: 22px;
+}
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon {
+  font-size: calc(var(--td-font-size-body-medium) + 10px);
+}
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title:after {
+  content: "";
+  display: block;
+  width: 9999px;
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 24px;
+  content: "^";
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  border: 0;
+  font-size: var(--td-font-size-body-large);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title:after {
+  content: "";
+  display: block;
+  width: 9999px;
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 24px;
+  content: "^";
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  border: 0;
+  font-size: var(--td-font-size-body-large);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
+  -webkit-transform: rotateZ(-90deg);
+          transform: rotateZ(-90deg);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after,
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title:after,
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item {
+  overflow: visible;
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title {
+  padding-right: 0;
+  margin-bottom: var(--td-comp-margin-xs);
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
+  border-color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon {
+  background: var(--td-brand-color);
+  border-color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon {
+  background: var(--td-error-color);
+  border-color: var(--td-error-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__inner {
+  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-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--td-text-color-placeholder);
+  border-radius: var(--td-radius-circle);
+  margin-bottom: var(--td-comp-margin-xs);
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content {
+  text-align: center;
+  width: 140px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  content: "^";
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  border: 0;
+  font-size: var(--td-font-size-body-large);
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child)::after {
+  content: "";
+  display: block;
+  width: calc(100% - 16px);
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: calc(140px / 2 + 8px);
+  top: 2.5px;
+}
+.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+  border-bottom-color: var(--td-brand-color);
+  border-bottom-width: 2px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  content: "^";
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  border: 0;
+  font-size: var(--td-font-size-body-large);
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
+  -webkit-transform: rotateZ(-90deg);
+          transform: rotateZ(-90deg);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after,
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child)::after {
+  content: "";
+  display: block;
+  width: calc(100% - 16px);
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: calc(140px / 2 + 8px);
+  top: 2.5px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+  border-bottom-color: var(--td-brand-color);
+  border-bottom-width: 2px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child)::after,
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+  border-bottom-color: var(--td-brand-color);
+  border-bottom-width: 2px;
+}
+.t-steps--vertical {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 24px);
+  position: absolute;
+  top: 24px;
+  left: 6px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: var(--td-font-size-body-large);
+  -webkit-transform: rotateZ(180deg);
+          transform: rotateZ(180deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--positive .t-steps-item {
+  padding-bottom: var(--td-comp-margin-xxl);
+  margin-bottom: 5px;
+}
+.t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child)::before {
+  content: "";
+  display: block;
+  height: 100%;
+  border-left: 0;
+  border-top: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
+  position: absolute;
+  top: 35px;
+  left: 11px;
+}
+.t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child)::before {
+  border-right-width: 2px;
+  border-right-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--default-anchor .t-steps-item__content {
+  margin-left: 0px;
+}
+.t-steps--vertical.t-steps--default-anchor .t-steps-item__title {
+  margin-bottom: var(--td-comp-margin-xs);
+}
+.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 4px);
+  position: absolute;
+  top: 8px;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: var(--td-font-size-body-medium);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before {
+  content: "";
+  display: block;
+  height: 100%;
+  border-bottom: 0;
+  border-left: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: 3.5px;
+  top: 17px;
+}
+.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+  border-right-color: var(--td-brand-color);
+  border-right-width: 2px;
+}
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item {
+  margin-bottom: 0;
+}
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item .t-steps-item__title {
+  margin-bottom: var(--td-comp-margin-xs);
+}
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
+  border-color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon {
+  background: var(--td-brand-color);
+  border-color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon {
+  background: var(--td-error-color);
+  border-color: var(--td-error-color);
+}
+.t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--td-text-color-placeholder);
+  border-radius: var(--td-radius-circle);
+  margin-bottom: var(--td-comp-margin-xs);
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  top: 8px;
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 24px);
+  position: absolute;
+  top: 24px;
+  left: 6px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: var(--td-font-size-body-large);
+  -webkit-transform: rotateZ(180deg);
+          transform: rotateZ(180deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  -webkit-transform: rotateZ(0);
+          transform: rotateZ(0);
+  margin-top: var(--td-comp-margin-xs);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse .t-steps-item {
+  padding-bottom: var(--td-comp-margin-xxl);
+  margin-bottom: 5px;
+}
+.t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before {
+  content: "";
+  display: block;
+  height: 100%;
+  border-left: 0;
+  border-bottom: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
+  position: absolute;
+  top: 35px;
+  left: 11px;
+}
+.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child)::before {
+  border-right-width: 2px;
+  border-right-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 4px);
+  position: absolute;
+  top: 8px;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: var(--td-font-size-body-medium);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item {
+  margin-bottom: 0;
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child)::before {
+  content: "";
+  display: block;
+  height: 100%;
+  border-bottom: 0;
+  border-left: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: 3.5px;
+  top: 17px;
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child::before {
+  display: none;
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::before {
+  border-right-width: 2px;
+  border-right-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}