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

package/es/avatar/style/index.css

@@ -1 +1,252 @@
-.t-avatar{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;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;background:var(--td-brand-color-focus);color:var(--td-text-color-brand);overflow:hidden;white-space:nowrap;vertical-align:middle;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:content-box;box-sizing:content-box;width:var(--td-comp-size-m);height:var(--td-comp-size-m);font-size:var(--td-font-size-body-large);line-height:var(--td-comp-size-m)}.t-avatar.t-avatar__icon{font-size:var(--td-comp-size-xxs)}.t-avatar img{height:var(--td-comp-size-m);width:var(--td-comp-size-m)}.t-avatar--circle{border-radius:var(--td-radius-circle)}.t-avatar--round{border-radius:var(--td-radius-default)}.t-avatar.t-size-s{width:var(--td-comp-size-xs);height:var(--td-comp-size-xs);font-size:var(--td-font-size-body-medium);line-height:var(--td-comp-size-xs)}.t-avatar.t-size-s.t-avatar__icon{font-size:var(--td-comp-size-xxxs)}.t-avatar.t-size-s img{height:var(--td-comp-size-xs);width:var(--td-comp-size-xs)}.t-avatar.t-size-l{width:var(--td-comp-size-xl);height:var(--td-comp-size-xl);font-size:var(--td-font-size-title-large);line-height:var(--td-comp-size-xl)}.t-avatar.t-size-l.t-avatar__icon{font-size:var(--td-comp-size-xs)}.t-avatar.t-size-l img{height:var(--td-comp-size-xl);width:var(--td-comp-size-xl)}.t-avatar>.t-image__wrapper{max-width:100%;max-height:100%}.t-avatar-group{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-avatar-group .t-avatar{border:2px solid var(--td-bg-color-container)}.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child){margin-right:calc(0px - var(--td-size-3))}.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-s{margin-right:calc(0px - var(--td-size-2))}.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-l{margin-right:calc(0px - var(--td-size-4))}.t-avatar-group.t-avatar--offset-left .t-avatar:first-child{z-index:49}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(2){z-index:48}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(3){z-index:47}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(4){z-index:46}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(5){z-index:45}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(6){z-index:44}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(7){z-index:43}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(8){z-index:42}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(9){z-index:41}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(10){z-index:40}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(11){z-index:39}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(12){z-index:38}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(13){z-index:37}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(14){z-index:36}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(15){z-index:35}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(16){z-index:34}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(17){z-index:33}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(18){z-index:32}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(19){z-index:31}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(20){z-index:30}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(21){z-index:29}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(22){z-index:28}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(23){z-index:27}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(24){z-index:26}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(25){z-index:25}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(26){z-index:24}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(27){z-index:23}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(28){z-index:22}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(29){z-index:21}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(30){z-index:20}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(31){z-index:19}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(32){z-index:18}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(33){z-index:17}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(34){z-index:16}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(35){z-index:15}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(36){z-index:14}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(37){z-index:13}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(38){z-index:12}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(39){z-index:11}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(40){z-index:10}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(41){z-index:9}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(42){z-index:8}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(43){z-index:7}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(44){z-index:6}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(45){z-index:5}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(46){z-index:4}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(47){z-index:3}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(48){z-index:2}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(49){z-index:1}.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(50){z-index:0}.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child){margin-left:calc(0px - var(--td-size-3))}.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-s{margin-left:calc(0px - var(--td-size-2))}.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-l{margin-left:calc(0px - var(--td-size-4))}
+.t-avatar {
+  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;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  background: var(--td-brand-color-focus);
+  color: var(--td-text-color-brand);
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  width: var(--td-comp-size-m);
+  height: var(--td-comp-size-m);
+  font-size: var(--td-font-size-body-large);
+  line-height: var(--td-comp-size-m);
+}
+.t-avatar.t-avatar__icon {
+  font-size: var(--td-comp-size-xxs);
+}
+.t-avatar img {
+  height: var(--td-comp-size-m);
+  width: var(--td-comp-size-m);
+}
+.t-avatar--circle {
+  border-radius: var(--td-radius-circle);
+}
+.t-avatar--round {
+  border-radius: var(--td-radius-default);
+}
+.t-avatar.t-size-s {
+  width: var(--td-comp-size-xs);
+  height: var(--td-comp-size-xs);
+  font-size: var(--td-font-size-body-medium);
+  line-height: var(--td-comp-size-xs);
+}
+.t-avatar.t-size-s.t-avatar__icon {
+  font-size: var(--td-comp-size-xxxs);
+}
+.t-avatar.t-size-s img {
+  height: var(--td-comp-size-xs);
+  width: var(--td-comp-size-xs);
+}
+.t-avatar.t-size-l {
+  width: var(--td-comp-size-xl);
+  height: var(--td-comp-size-xl);
+  font-size: var(--td-font-size-title-large);
+  line-height: var(--td-comp-size-xl);
+}
+.t-avatar.t-size-l.t-avatar__icon {
+  font-size: var(--td-comp-size-xs);
+}
+.t-avatar.t-size-l img {
+  height: var(--td-comp-size-xl);
+  width: var(--td-comp-size-xl);
+}
+.t-avatar > .t-image__wrapper {
+  max-width: 100%;
+  max-height: 100%;
+}
+.t-avatar-group {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-avatar-group .t-avatar {
+  border: 2px solid var(--td-bg-color-container);
+}
+.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child) {
+  margin-right: calc(0px - var(--td-size-3));
+}
+.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-s {
+  margin-right: calc(0px - var(--td-size-2));
+}
+.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-l {
+  margin-right: calc(0px - var(--td-size-4));
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(1) {
+  z-index: 49;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(2) {
+  z-index: 48;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(3) {
+  z-index: 47;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(4) {
+  z-index: 46;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(5) {
+  z-index: 45;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(6) {
+  z-index: 44;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(7) {
+  z-index: 43;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(8) {
+  z-index: 42;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(9) {
+  z-index: 41;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(10) {
+  z-index: 40;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(11) {
+  z-index: 39;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(12) {
+  z-index: 38;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(13) {
+  z-index: 37;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(14) {
+  z-index: 36;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(15) {
+  z-index: 35;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(16) {
+  z-index: 34;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(17) {
+  z-index: 33;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(18) {
+  z-index: 32;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(19) {
+  z-index: 31;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(20) {
+  z-index: 30;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(21) {
+  z-index: 29;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(22) {
+  z-index: 28;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(23) {
+  z-index: 27;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(24) {
+  z-index: 26;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(25) {
+  z-index: 25;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(26) {
+  z-index: 24;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(27) {
+  z-index: 23;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(28) {
+  z-index: 22;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(29) {
+  z-index: 21;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(30) {
+  z-index: 20;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(31) {
+  z-index: 19;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(32) {
+  z-index: 18;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(33) {
+  z-index: 17;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(34) {
+  z-index: 16;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(35) {
+  z-index: 15;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(36) {
+  z-index: 14;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(37) {
+  z-index: 13;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(38) {
+  z-index: 12;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(39) {
+  z-index: 11;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(40) {
+  z-index: 10;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(41) {
+  z-index: 9;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(42) {
+  z-index: 8;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(43) {
+  z-index: 7;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(44) {
+  z-index: 6;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(45) {
+  z-index: 5;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(46) {
+  z-index: 4;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(47) {
+  z-index: 3;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(48) {
+  z-index: 2;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(49) {
+  z-index: 1;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(50) {
+  z-index: 0;
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child) {
+  margin-left: calc(0px - var(--td-size-3));
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-s {
+  margin-left: calc(0px - var(--td-size-2));
+}
+.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-l {
+  margin-left: calc(0px - var(--td-size-4));
+}

package/es/badge/style/index.css

@@ -1 +1,60 @@
-.t-badge{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;position:relative;display:inline-block}.t-badge--circle,.t-badge--dot,.t-badge--round{position:absolute;top:0;right:0;color:var(--td-text-color-anti);text-align:center;font:var(--td-font-body-small);-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100% 0;transform-origin:100% 0}.t-badge--static{position:static;display:inline-block;-webkit-transform:none;transform:none}.t-badge--dot{right:1px;margin-top:1px;width:6px;height:6px;border-radius:var(--td-radius-circle);background-color:var(--td-error-color)}.t-badge--circle,.t-badge--round{padding-right:calc(var(--td-comp-size-xxs)/2 - 4px);padding-left:calc(var(--td-comp-size-xxs)/2 - 4px);min-width:8px;height:var(--td-comp-size-xxs);border-radius:calc(var(--td-comp-size-xxs)/2);background-color:var(--td-error-color);line-height:var(--td-comp-size-xxs)}.t-badge--circle.t-size-s,.t-badge--round.t-size-s{padding-right:calc(var(--td-comp-size-xxxs)/2 - 4px);padding-left:calc(var(--td-comp-size-xxxs)/2 - 4px);min-width:8px;height:var(--td-comp-size-xxxs);line-height:var(--td-comp-size-xxxs)}.t-badge--round{border-radius:var(--td-radius-round)}
+.t-badge {
+  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;
+  position: relative;
+  display: inline-block;
+}
+.t-badge--dot,
+.t-badge--circle,
+.t-badge--round {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--td-text-color-anti);
+  text-align: center;
+  font: var(--td-font-body-small);
+  -webkit-transform: translate(50%, -50%);
+          transform: translate(50%, -50%);
+  -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+}
+.t-badge--static {
+  position: static;
+  display: inline-block;
+  -webkit-transform: none;
+          transform: none;
+}
+.t-badge--dot {
+  right: 1px;
+  margin-top: 1px;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--td-radius-circle);
+  background-color: var(--td-error-color);
+}
+.t-badge--circle,
+.t-badge--round {
+  padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2);
+  padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2);
+  min-width: 8px;
+  height: var(--td-comp-size-xxs);
+  border-radius: calc(var(--td-comp-size-xxs) / 2);
+  background-color: var(--td-error-color);
+  line-height: var(--td-comp-size-xxs);
+}
+.t-badge--circle.t-size-s,
+.t-badge--round.t-size-s {
+  padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2);
+  padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2);
+  min-width: 8px;
+  height: var(--td-comp-size-xxxs);
+  line-height: var(--td-comp-size-xxxs);
+}
+.t-badge--round {
+  border-radius: var(--td-radius-round);
+}

package/es/breadcrumb/style/index.css

@@ -1 +1,210 @@
-@-webkit-keyframes changeColor{0%{color:var(--td-brand-color-hover)}to{color:var(--td-brand-color-active)}}@keyframes changeColor{0%{color:var(--td-brand-color-hover)}to{color:var(--td-brand-color-active)}}.t-breadcrumb{color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;font:var(--td-font-body-medium);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-breadcrumb__separator{margin:0 var(--td-comp-margin-xs);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-breadcrumb__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--td-text-color-placeholder);text-decoration:none}.t-breadcrumb__item.t-is-current{color:var(--td-text-color-primary)}.t-breadcrumb__item.t-is-current .t-icon{color:var(--td-text-color-placeholder)}.t-breadcrumb__item:last-child{color:var(--td-text-color-primary)}.t-breadcrumb__item:last-child .t-breadcrumb__separator{display:none}.t-breadcrumb__item .t-icon{font-size:var(--td-font-size-body-large)}.t-breadcrumb__item .t-link{color:inherit;text-decoration:none}.t-breadcrumb__item .t-link:hover{color:var(--td-brand-color)}.t-breadcrumb__item .t-is-disabled{cursor:not-allowed}.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner{color:var(--td-text-color-disabled)}.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover{color:var(--td-text-color-disabled);cursor:not-allowed}.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active{-webkit-animation:none;animation:none}.t-breadcrumb__item--arrow,.t-breadcrumb__item--slash{margin:0 var(--td-comp-margin-xs);line-height:0;color:var(--td-text-color-placeholder);display:inline-block;vertical-align:middle}.t-breadcrumb__inner{font:var(--td-font-body-medium);word-break:break-all;display:inline-block;vertical-align:middle}.t-breadcrumb__inner .t-icon{margin:0 var(--td-comp-margin-xs)}.t-breadcrumb__select{position:relative}.t-breadcrumb__select:hover .t-breadcrumb__option{display:block}.t-breadcrumb__select-item:hover .t-icon{color:var(--td-brand-color)}.t-breadcrumb__option{display:none;position:absolute;top:28px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);max-width:120px;background:var(--td-bg-color-container);-webkit-box-shadow:var(--td-shadow-2);box-shadow:var(--td-shadow-2);z-index:20}.t-breadcrumb__option-item{padding:8px;font:var(--td-font-body-medium);color:var(--td-text-color-primary);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.t-breadcrumb__option-item.t-is-active,.t-breadcrumb__option-item:hover{color:var(--td-brand-color)}.t-breadcrumb__inner-msg{display:none;position:absolute;left:50%;bottom:30px;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:300px;padding:8px;color:var(--td-text-color-primary);background:var(--td-bg-color-container);border-radius:calc(var(--td-radius-default)*0.5);-webkit-box-shadow:var(--td-shadow-2);box-shadow:var(--td-shadow-2);z-index:20}.t-breadcrumb__inner-msg:before{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-4px;width:0;height:0;border-left:6px solid transparent;border-bottom:0 solid transparent;border-right:6px solid transparent;border-top:8px solid var(--td-bg-color-container);z-index:20}.t-breadcrumb--text-overflow{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg{display:block}.t-breadcrumb--text-overflow .t-breadcrumb__inner{max-width:120px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-breadcrumb--text-overflow .t-breadcrumb__inner-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.t-breadcrumb--text-overflow .t-breadcrumb__inner:hover{color:var(--td-brand-color);-webkit-transition:color .2s linear;transition:color .2s linear;cursor:pointer}.t-breadcrumb--text-overflow .t-breadcrumb__inner:active{-webkit-animation:changeColor .2s linear;animation:changeColor .2s linear}
+@-webkit-keyframes changeColor {
+  from {
+    color: var(--td-brand-color-hover);
+  }
+  to {
+    color: var(--td-brand-color-active);
+  }
+}
+@keyframes changeColor {
+  from {
+    color: var(--td-brand-color-hover);
+  }
+  to {
+    color: var(--td-brand-color-active);
+  }
+}
+.t-breadcrumb {
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: var(--td-font-body-medium);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-breadcrumb__separator {
+  margin: 0 var(--td-comp-margin-xs);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-breadcrumb__item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: var(--td-text-color-placeholder);
+  text-decoration: none;
+}
+.t-breadcrumb__item.t-is-current {
+  color: var(--td-text-color-primary);
+}
+.t-breadcrumb__item.t-is-current .t-icon {
+  color: var(--td-text-color-placeholder);
+}
+.t-breadcrumb__item:last-child {
+  color: var(--td-text-color-primary);
+}
+.t-breadcrumb__item:last-child .t-breadcrumb__separator {
+  display: none;
+}
+.t-breadcrumb__item .t-icon {
+  font-size: var(--td-font-size-body-large);
+}
+.t-breadcrumb__item .t-link {
+  color: inherit;
+  text-decoration: none;
+}
+.t-breadcrumb__item .t-link:hover {
+  color: var(--td-brand-color);
+}
+.t-breadcrumb__item .t-is-disabled {
+  cursor: not-allowed;
+}
+.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner {
+  color: var(--td-text-color-disabled);
+}
+.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
+}
+.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active {
+  -webkit-animation: none;
+          animation: none;
+}
+.t-breadcrumb__item--arrow {
+  margin: 0 var(--td-comp-margin-xs);
+  line-height: 0;
+  color: var(--td-text-color-placeholder);
+  display: inline-block;
+  vertical-align: middle;
+}
+.t-breadcrumb__item--slash {
+  margin: 0 var(--td-comp-margin-xs);
+  line-height: 0;
+  color: var(--td-text-color-placeholder);
+  display: inline-block;
+  vertical-align: middle;
+}
+.t-breadcrumb__inner {
+  font: var(--td-font-body-medium);
+  word-break: break-all;
+  display: inline-block;
+  vertical-align: middle;
+}
+.t-breadcrumb__inner .t-icon {
+  margin: 0 var(--td-comp-margin-xs);
+}
+.t-breadcrumb__select {
+  position: relative;
+}
+.t-breadcrumb__select:hover .t-breadcrumb__option {
+  display: block;
+}
+.t-breadcrumb__select-item:hover .t-icon {
+  color: var(--td-brand-color);
+}
+.t-breadcrumb__option {
+  display: none;
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  max-width: 120px;
+  background: var(--td-bg-color-container);
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+  z-index: 20;
+}
+.t-breadcrumb__option-item {
+  padding: 8px;
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.t-breadcrumb__option-item:hover {
+  color: var(--td-brand-color);
+}
+.t-breadcrumb__option-item.t-is-active {
+  color: var(--td-brand-color);
+}
+.t-breadcrumb__inner-msg {
+  display: none;
+  position: absolute;
+  left: 50%;
+  bottom: 30px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 300px;
+  padding: 8px;
+  color: var(--td-text-color-primary);
+  background: var(--td-bg-color-container);
+  border-radius: calc(var(--td-radius-default) * 0.5);
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+  z-index: 20;
+}
+.t-breadcrumb__inner-msg::before {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  margin-left: -4px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 8px 6px 0;
+  border-color: var(--td-bg-color-container) transparent transparent transparent;
+  z-index: 20;
+}
+.t-breadcrumb--text-overflow {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg {
+  display: block;
+}
+.t-breadcrumb--text-overflow .t-breadcrumb__inner {
+  max-width: 120px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-breadcrumb--text-overflow .t-breadcrumb__inner-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.t-breadcrumb--text-overflow .t-breadcrumb__inner:hover {
+  color: var(--td-brand-color);
+  -webkit-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+  cursor: pointer;
+}
+.t-breadcrumb--text-overflow .t-breadcrumb__inner:active {
+  -webkit-animation: 0.2s linear changeColor;
+          animation: 0.2s linear changeColor;
+}