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

package/es/date-picker/style/index.css

@@ -1 +1,467 @@
-.t-date-picker,.t-date-range-picker{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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}.t-date-picker__header-controller-month-popup>.t-popup__content,.t-date-picker__header-controller-year-popup>.t-popup__content{max-height:160px}.t-date-picker__panel-container>.t-popup__content,.t-date-range-picker__panel-container>.t-popup__content{padding:0;min-width:280px}.t-date-picker__panel,.t-date-range-picker__panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.t-date-picker__panel--direction-row,.t-date-range-picker__panel--direction-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.t-date-picker__panel .t-time-picker__panel,.t-date-range-picker__panel .t-time-picker__panel{width:216px}.t-date-picker__panel .t-time-picker__panel-section-body,.t-date-range-picker__panel .t-time-picker__panel-section-body{padding:0}.t-date-picker__panel .t-time-picker__panel-body,.t-date-range-picker__panel .t-time-picker__panel-body{margin:0}.t-date-picker__panel-content,.t-date-range-picker__panel-content,.t-date-range-picker__panel-content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.t-date-picker__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:var(--td-comp-margin-m);width:100%}.t-date-picker__header-controller{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:var(--td-comp-margin-s)}.t-date-picker__header-controller .t-date-picker__header-controller-month{width:80px;display:-webkit-box;display:-ms-flexbox;display:flex}.t-date-picker__header-controller .t-date-picker__header-controller-year{width:78px;display:-webkit-box;display:-ms-flexbox;display:flex}.t-date-picker__table table{width:100%;border-collapse:collapse}.t-date-picker__table table th{text-align:center;color:var(--td-text-color-secondary);font-weight:400}.t-date-picker__table table td.t-date-picker__cell{text-align:center;font-weight:500}.t-date-picker__table table td.t-date-picker__cell,.t-date-picker__table table th{padding:0;border:0;line-height:var(--td-line-height-body-medium)}.t-date-picker__table table thead:after,.t-date-picker__table table thead:before{content:"-";display:block;line-height:var(--td-comp-margin-xs);color:transparent}.t-date-picker__table-week-row{cursor:pointer;position:-webkit-sticky;position:sticky}.t-date-picker__table-week-row .t-date-picker__cell:first-child .t-date-picker__cell-inner{color:var(--td-text-color-disabled)}.t-date-picker__table-week-row .t-date-picker__cell:hover .t-date-picker__cell-inner{-webkit-box-shadow:none;box-shadow:none;background:none}.t-date-picker__table-week-row:after{content:"";position:absolute;left:var(--td-comp-margin-xxxl);right:0;top:calc(var(--td-comp-margin-xs) - 1px);z-index:10;height:var(--td-comp-size-xs);border-radius:var(--td-radius-default);-webkit-transition:background-color .2s linear,border-color .2s linear,color .2s linear,-webkit-box-shadow .2s cubic-bezier(.38,0,.24,1);transition:background-color .2s linear,border-color .2s linear,color .2s linear,-webkit-box-shadow .2s cubic-bezier(.38,0,.24,1);transition:box-shadow .2s cubic-bezier(.38,0,.24,1),background-color .2s linear,border-color .2s linear,color .2s linear;transition:box-shadow .2s cubic-bezier(.38,0,.24,1),background-color .2s linear,border-color .2s linear,color .2s linear,-webkit-box-shadow .2s cubic-bezier(.38,0,.24,1);pointer-events:none}.t-date-picker__table-week-row:hover .t-date-picker__cell:first-child .t-date-picker__cell-inner{color:var(--td-brand-color)}.t-date-picker__table-week-row:hover:after{-webkit-box-shadow:inset 0 0 0 1px var(--td-brand-color);box-shadow:inset 0 0 0 1px var(--td-brand-color)}.t-date-picker__table-week-row--active:after{opacity:1;z-index:0;background-color:var(--td-brand-color)}.t-date-picker__table-week-row--active .t-date-picker__cell:first-child .t-date-picker__cell-inner{color:var(--td-brand-color)}.t-date-picker__table-week-row--active .t-date-picker__cell .t-date-picker__cell-inner{background:transparent;color:var(--td-text-color-anti)}.t-date-picker__table-week-row--range:after{opacity:1;z-index:0;background-color:var(--td-brand-color-light)}.t-date-picker__table-week-row--range .t-date-picker__cell .t-date-picker__cell-inner{background:transparent}.t-date-picker__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:var(--td-pop-padding-xl);gap:var(--td-comp-margin-s)}.t-date-picker__footer--bottom{border-top:1px solid var(--td-component-stroke)}.t-date-picker__footer--top{border-bottom:1px solid var(--td-component-stroke)}.t-date-picker__footer--left{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-right:1px solid var(--td-component-stroke)}.t-date-picker__footer--left .t-date-picker__presets{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.t-date-picker__footer--right{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-left:1px solid var(--td-component-stroke)}.t-date-picker__footer--right .t-date-picker__presets{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.t-date-picker__presets{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--td-comp-margin-s);white-space:nowrap;min-width:var(--td-comp-size-xl)}.t-date-picker__presets .t-button{cursor:pointer}.t-date-picker__presets a{color:var(--td-brand-color)}.t-date-picker__presets a:hover{color:var(--td-brand-color-hover)}.t-date-picker__panel-time,.t-date-range-picker__panel-time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:calc(var(--td-comp-margin-m)/2);padding:var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs));border-left:1px solid var(--td-component-stroke)}.t-date-picker__panel-time-viewer,.t-date-range-picker__panel-time-viewer{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--td-comp-size-m);line-height:var(--td-line-height-body-medium);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:var(--td-text-color-primary)}.t-date-picker__panel-time .t-time-picker__panel-body,.t-date-range-picker__panel-time .t-time-picker__panel-body{margin:0}.t-date-picker__panel-date,.t-date-picker__panel-month,.t-date-picker__panel-quarter,.t-date-picker__panel-week,.t-date-picker__panel-year{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:var(--td-pop-padding-xl);gap:var(--td-comp-margin-m);width:280px;-webkit-box-sizing:border-box;box-sizing:border-box}.t-date-picker__panel-month .t-date-picker__cell--hover-highlight+.t-date-picker__cell--hover-highlight:after,.t-date-picker__panel-month .t-date-picker__cell--hover-highlight+.t-date-picker__cell--hover-highlight:before,.t-date-picker__panel-year .t-date-picker__cell--hover-highlight+.t-date-picker__cell--hover-highlight:after,.t-date-picker__panel-year .t-date-picker__cell--hover-highlight+.t-date-picker__cell--hover-highlight:before{opacity:1;left:calc(0px - var(--td-comp-size-xs) - var(--td-comp-margin-xxl))}.t-date-picker__panel-month .t-date-picker__cell--hover-highlight+.t-date-picker__cell--active:after,.t-date-picker__panel-year .t-date-picker__cell--hover-highlight+.t-date-picker__cell--active:after{opacity:1;left:calc(0px - var(--td-comp-size-xs) - var(--td-comp-margin-xxl));z-index:5}.t-date-picker__panel-month .t-date-picker__cell--highlight+.t-date-picker__cell--highlight:before,.t-date-picker__panel-year .t-date-picker__cell--highlight+.t-date-picker__cell--highlight:before{left:calc(0px - var(--td-comp-size-xs) - var(--td-comp-margin-xxl))}.t-date-picker__panel-month .t-date-picker__header-controller-year,.t-date-picker__panel-quarter .t-date-picker__header-controller-year,.t-date-picker__panel-year .t-date-picker__header-controller-year{width:130px;display:-webkit-box;display:-ms-flexbox;display:flex}.t-date-picker__panel-month .t-date-picker__table table tbody,.t-date-picker__panel-quarter .t-date-picker__table table tbody,.t-date-picker__panel-year .t-date-picker__table table tbody{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--td-comp-margin-m);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.t-date-picker__panel-month .t-date-picker__table table tbody tr,.t-date-picker__panel-quarter .t-date-picker__table table tbody tr,.t-date-picker__panel-year .t-date-picker__table table tbody tr{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.t-date-picker__panel-month .t-date-picker__cell--disabled+.t-date-picker__cell--disabled:before,.t-date-picker__panel-quarter .t-date-picker__cell--disabled+.t-date-picker__cell--disabled:before,.t-date-picker__panel-year .t-date-picker__cell--disabled+.t-date-picker__cell--disabled:before{left:calc(0px - var(--td-comp-size-xxxl))}.t-date-picker__panel-month .t-date-picker__cell:first-child,.t-date-picker__panel-quarter .t-date-picker__cell:first-child,.t-date-picker__panel-year .t-date-picker__cell:first-child{text-align:left}.t-date-picker__panel-month .t-date-picker__cell:nth-child(3),.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(3),.t-date-picker__panel-year .t-date-picker__cell:nth-child(3){text-align:right}.t-date-picker__panel-month .t-date-picker__cell-inner,.t-date-picker__panel-quarter .t-date-picker__cell-inner,.t-date-picker__panel-year .t-date-picker__cell-inner{width:var(--td-comp-size-xxl)}.t-date-picker__cell{cursor:pointer;position:relative;padding:0}.t-date-picker__cell:after,.t-date-picker__cell:before{content:"";position:absolute;top:50%;right:-5%;left:-5%;z-index:1;opacity:0;border-radius:var(--td-radius-default);height:var(--td-comp-size-xs);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s cubic-bezier(0,0,.15,1);transition:opacity .2s cubic-bezier(0,0,.15,1)}.t-date-picker__cell:hover .t-date-picker__cell-inner{-webkit-box-shadow:inset 0 0 0 1px var(--td-brand-color);box-shadow:inset 0 0 0 1px var(--td-brand-color)}.t-date-picker__cell-inner{position:relative;z-index:5;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:center;-ms-flex-align:center;align-items:center;width:var(--td-comp-size-xs);height:var(--td-comp-size-xs);margin:calc(var(--td-comp-margin-xs) - 1px);border-radius:var(--td-radius-default);-webkit-transition:background-color .2s linear,border-color .2s linear,color .2s linear,-webkit-box-shadow .2s cubic-bezier(.38,0,.24,1);transition:background-color .2s linear,border-color .2s linear,color .2s linear,-webkit-box-shadow .2s cubic-bezier(.38,0,.24,1);transition:box-shadow .2s cubic-bezier(.38,0,.24,1),background-color .2s linear,border-color .2s linear,color .2s linear;transition:box-shadow .2s cubic-bezier(.38,0,.24,1),background-color .2s linear,border-color .2s linear,color .2s linear,-webkit-box-shadow .2s cubic-bezier(.38,0,.24,1)}.t-date-picker__cell--now .t-date-picker__cell-inner{color:var(--td-brand-color);background:var(--td-brand-color-light)}.t-date-picker__cell--highlight:before,.t-date-picker__cell--hover-highlight:after{opacity:1;background-color:var(--td-brand-color-light)}.t-date-picker__cell--highlight.t-date-picker__cell--hover-highlight:after{opacity:1;background-color:rgba(0,0,0,.06)}.t-date-picker__cell--additional:hover .t-date-picker__cell-inner{-webkit-box-shadow:none;box-shadow:none;border-color:var(--td-bg-color-container-hover);background-color:var(--td-bg-color-container-hover)}.t-date-picker__cell--additional .t-date-picker__cell-inner{color:var(--td-text-color-disabled)}.t-date-picker__cell--active .t-date-picker__cell-inner{color:var(--td-text-color-anti);background-color:var(--td-brand-color)}.t-date-picker__cell--active-start:before{opacity:1;left:calc(var(--td-comp-margin-xs)*2 - 2px);border-top-left-radius:var(--td-radius-default);border-bottom-left-radius:var(--td-radius-default)}.t-date-picker__cell--active-start:hover:before{left:-5%}.t-date-picker__cell--active-end:before{opacity:1;right:calc(var(--td-comp-margin-xs)*2 - 2px);border-top-right-radius:var(--td-radius-default);border-bottom-right-radius:var(--td-radius-default)}.t-date-picker__cell--active-end:hover:before{right:-5%}.t-date-picker__cell--disabled:hover .t-date-picker__cell-inner{-webkit-box-shadow:none;box-shadow:none;background-color:var(--td-bg-color-component-disabled)}.t-date-picker__cell--disabled .t-date-picker__cell-inner{cursor:not-allowed;color:var(--td-text-color-disabled);background-color:var(--td-bg-color-component-disabled)}.t-date-picker__cell--disabled+.t-date-picker__cell--disabled:before{opacity:1;left:calc(0px - var(--td-comp-size-l));background-color:var(--td-bg-color-component-disabled);border-radius:var(--td-radius-default)}.t-date-picker__input--placeholder input{color:var(--td-text-color-placeholder)}
+.t-date-picker,
+.t-date-range-picker {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  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;
+}
+.t-date-picker__header-controller-month-popup > .t-popup__content,
+.t-date-picker__header-controller-year-popup > .t-popup__content {
+  max-height: 160px;
+}
+.t-date-picker__panel-container > .t-popup__content,
+.t-date-range-picker__panel-container > .t-popup__content {
+  padding: 0;
+  min-width: 280px;
+}
+.t-date-picker__panel,
+.t-date-range-picker__panel {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-date-picker__panel--direction-row,
+.t-date-range-picker__panel--direction-row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+.t-date-picker__panel .t-time-picker__panel,
+.t-date-range-picker__panel .t-time-picker__panel {
+  width: 216px;
+}
+.t-date-picker__panel .t-time-picker__panel-section-body,
+.t-date-range-picker__panel .t-time-picker__panel-section-body {
+  padding: 0;
+}
+.t-date-picker__panel .t-time-picker__panel-body,
+.t-date-range-picker__panel .t-time-picker__panel-body {
+  margin: 0;
+}
+.t-date-picker__panel-content,
+.t-date-range-picker__panel-content,
+.t-date-range-picker__panel-content-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-date-picker__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: var(--td-comp-margin-m);
+  width: 100%;
+}
+.t-date-picker__header-controller {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: var(--td-comp-margin-s);
+}
+.t-date-picker__header-controller .t-date-picker__header-controller-month {
+  width: 80px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-date-picker__header-controller .t-date-picker__header-controller-year {
+  width: 78px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-date-picker__table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.t-date-picker__table table th {
+  text-align: center;
+  color: var(--td-text-color-secondary);
+  font-weight: 400;
+}
+.t-date-picker__table table td.t-date-picker__cell {
+  text-align: center;
+  font-weight: 500;
+}
+.t-date-picker__table table th,
+.t-date-picker__table table td.t-date-picker__cell {
+  padding: 0;
+  border: 0;
+  line-height: var(--td-line-height-body-medium);
+}
+.t-date-picker__table table thead::after {
+  content: "-";
+  display: block;
+  line-height: var(--td-comp-margin-xs);
+  color: transparent;
+}
+.t-date-picker__table table thead::before {
+  content: "-";
+  display: block;
+  line-height: var(--td-comp-margin-xs);
+  color: transparent;
+}
+.t-date-picker__table-week-row {
+  cursor: pointer;
+  position: -webkit-sticky;
+  position: sticky;
+}
+.t-date-picker__table-week-row .t-date-picker__cell:first-child .t-date-picker__cell-inner {
+  color: var(--td-text-color-disabled);
+}
+.t-date-picker__table-week-row .t-date-picker__cell:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background: none;
+}
+.t-date-picker__table-week-row::after {
+  content: "";
+  position: absolute;
+  left: var(--td-comp-margin-xxxl);
+  right: 0;
+  top: calc(var(--td-comp-margin-xs) - 1px);
+  z-index: 10;
+  height: var(--td-comp-size-xs);
+  border-radius: var(--td-radius-default);
+  -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
+  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  pointer-events: none;
+}
+.t-date-picker__table-week-row:hover .t-date-picker__cell:first-child .t-date-picker__cell-inner {
+  color: var(--td-brand-color);
+}
+.t-date-picker__table-week-row:hover::after {
+  -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color);
+          box-shadow: inset 0 0 0 1px var(--td-brand-color);
+}
+.t-date-picker__table-week-row--active::after {
+  opacity: 1;
+  z-index: 0;
+  background-color: var(--td-brand-color);
+}
+.t-date-picker__table-week-row--active .t-date-picker__cell:first-child .t-date-picker__cell-inner {
+  color: var(--td-brand-color);
+}
+.t-date-picker__table-week-row--active .t-date-picker__cell .t-date-picker__cell-inner {
+  background: transparent;
+  color: var(--td-text-color-anti);
+}
+.t-date-picker__table-week-row--range::after {
+  opacity: 1;
+  z-index: 0;
+  background-color: var(--td-brand-color-light);
+}
+.t-date-picker__table-week-row--range .t-date-picker__cell .t-date-picker__cell-inner {
+  background: transparent;
+}
+.t-date-picker__footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  padding: var(--td-pop-padding-xl);
+  gap: var(--td-comp-margin-s);
+}
+.t-date-picker__footer--bottom {
+  border-top: 1px solid var(--td-component-stroke);
+}
+.t-date-picker__footer--top {
+  border-bottom: 1px solid var(--td-component-stroke);
+}
+.t-date-picker__footer--left {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-right: 1px solid var(--td-component-stroke);
+}
+.t-date-picker__footer--left .t-date-picker__presets {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-date-picker__footer--right {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-left: 1px solid var(--td-component-stroke);
+}
+.t-date-picker__footer--right .t-date-picker__presets {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-date-picker__presets {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: var(--td-comp-margin-s);
+  white-space: nowrap;
+  min-width: var(--td-comp-size-xl);
+}
+.t-date-picker__presets .t-button {
+  cursor: pointer;
+}
+.t-date-picker__presets a {
+  color: var(--td-brand-color);
+}
+.t-date-picker__presets a:hover {
+  color: var(--td-brand-color-hover);
+}
+.t-date-picker__panel-time,
+.t-date-range-picker__panel-time {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: calc(var(--td-comp-margin-m) / 2);
+  padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs));
+  border-left: 1px solid var(--td-component-stroke);
+}
+.t-date-picker__panel-time-viewer,
+.t-date-range-picker__panel-time-viewer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--td-comp-size-m);
+  line-height: var(--td-line-height-body-medium);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  color: var(--td-text-color-primary);
+}
+.t-date-picker__panel-time .t-time-picker__panel-body,
+.t-date-range-picker__panel-time .t-time-picker__panel-body {
+  margin: 0;
+}
+.t-date-picker__panel-year,
+.t-date-picker__panel-month,
+.t-date-picker__panel-quarter,
+.t-date-picker__panel-week,
+.t-date-picker__panel-date {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: var(--td-pop-padding-xl);
+  gap: var(--td-comp-margin-m);
+  width: 280px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::before,
+.t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::before,
+.t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after,
+.t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after {
+  opacity: 1;
+  left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl)));
+}
+.t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--active::after,
+.t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--active::after {
+  opacity: 1;
+  left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl)));
+  z-index: 5;
+}
+.t-date-picker__panel-year .t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before,
+.t-date-picker__panel-month .t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before {
+  left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl)));
+}
+.t-date-picker__panel-year .t-date-picker__header-controller-year,
+.t-date-picker__panel-month .t-date-picker__header-controller-year,
+.t-date-picker__panel-quarter .t-date-picker__header-controller-year {
+  width: 130px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-date-picker__panel-year .t-date-picker__table table tbody,
+.t-date-picker__panel-month .t-date-picker__table table tbody,
+.t-date-picker__panel-quarter .t-date-picker__table table tbody {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: var(--td-comp-margin-m);
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-date-picker__panel-year .t-date-picker__table table tbody tr,
+.t-date-picker__panel-month .t-date-picker__table table tbody tr,
+.t-date-picker__panel-quarter .t-date-picker__table table tbody tr {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.t-date-picker__panel-year .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
+.t-date-picker__panel-month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
+.t-date-picker__panel-quarter .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before {
+  left: calc(0px - var(--td-comp-size-xxxl));
+}
+.t-date-picker__panel-year .t-date-picker__cell:nth-child(1),
+.t-date-picker__panel-month .t-date-picker__cell:nth-child(1),
+.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(1) {
+  text-align: left;
+}
+.t-date-picker__panel-year .t-date-picker__cell:nth-child(3),
+.t-date-picker__panel-month .t-date-picker__cell:nth-child(3),
+.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(3) {
+  text-align: right;
+}
+.t-date-picker__panel-year .t-date-picker__cell-inner,
+.t-date-picker__panel-month .t-date-picker__cell-inner,
+.t-date-picker__panel-quarter .t-date-picker__cell-inner {
+  width: var(--td-comp-size-xxl);
+}
+.t-date-picker__cell {
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+}
+.t-date-picker__cell::before,
+.t-date-picker__cell::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: -5%;
+  left: -5%;
+  z-index: 1;
+  opacity: 0;
+  border-radius: var(--td-radius-default);
+  height: var(--td-comp-size-xs);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
+}
+.t-date-picker__cell:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color);
+          box-shadow: inset 0 0 0 1px var(--td-brand-color);
+}
+.t-date-picker__cell-inner {
+  position: relative;
+  z-index: 5;
+  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: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: var(--td-comp-size-xs);
+  height: var(--td-comp-size-xs);
+  margin: calc(var(--td-comp-margin-xs) - 1px);
+  border-radius: var(--td-radius-default);
+  -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
+  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+}
+.t-date-picker__cell--now .t-date-picker__cell-inner {
+  color: var(--td-brand-color);
+  background: var(--td-brand-color-light);
+}
+.t-date-picker__cell--hover-highlight::after {
+  opacity: 1;
+  background-color: var(--td-brand-color-light);
+}
+.t-date-picker__cell--highlight::before {
+  opacity: 1;
+  background-color: var(--td-brand-color-light);
+}
+.t-date-picker__cell--highlight.t-date-picker__cell--hover-highlight::after {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.t-date-picker__cell--additional:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border-color: var(--td-bg-color-container-hover);
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-date-picker__cell--additional .t-date-picker__cell-inner {
+  color: var(--td-text-color-disabled);
+}
+.t-date-picker__cell--active .t-date-picker__cell-inner {
+  color: var(--td-text-color-anti);
+  background-color: var(--td-brand-color);
+}
+.t-date-picker__cell--active-start::before {
+  opacity: 1;
+  left: calc(calc(var(--td-comp-margin-xs) - 1px) * 2);
+  border-top-left-radius: var(--td-radius-default);
+  border-bottom-left-radius: var(--td-radius-default);
+}
+.t-date-picker__cell--active-start:hover::before {
+  left: -5%;
+}
+.t-date-picker__cell--active-end::before {
+  opacity: 1;
+  right: calc(calc(var(--td-comp-margin-xs) - 1px) * 2);
+  border-top-right-radius: var(--td-radius-default);
+  border-bottom-right-radius: var(--td-radius-default);
+}
+.t-date-picker__cell--active-end:hover::before {
+  right: -5%;
+}
+.t-date-picker__cell--disabled:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background-color: var(--td-bg-color-component-disabled);
+}
+.t-date-picker__cell--disabled .t-date-picker__cell-inner {
+  cursor: not-allowed;
+  color: var(--td-text-color-disabled);
+  background-color: var(--td-bg-color-component-disabled);
+}
+.t-date-picker__cell--disabled + .t-date-picker__cell--disabled::before {
+  opacity: 1;
+  left: calc(0px - var(--td-comp-size-l));
+  background-color: var(--td-bg-color-component-disabled);
+  border-radius: var(--td-radius-default);
+}
+.t-date-picker__input--placeholder input {
+  color: var(--td-text-color-placeholder);
+}