.np-date-trigger {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.np-theme-personal .np-date-trigger {
  padding-left: 16px;
  padding-left: var(--size-16);
}
.clear-btn {
  transition: color 0.15s ease-in-out;
  color: #c9cbce;
  color: var(--color-interactive-secondary);
  position: absolute;
  top: 16px;
  top: var(--size-16);
  right: 16px;
  right: var(--size-16);
}
[dir="rtl"] .clear-btn {
  left: 16px;
  left: var(--size-16);
  right: auto;
  right: initial;
}
.np-theme-personal .clear-btn {
  top: 8px;
  top: var(--size-8);
  right: 8px;
  right: var(--size-8);
}
[dir="rtl"] .np-theme-personal .clear-btn {
  left: 8px;
  left: var(--size-8);
  right: auto;
  right: initial;
}
.clear-btn--sm {
  top: 8px;
  top: var(--size-8);
}
.np-theme-personal .clear-btn--sm {
  top: 0;
}
.clear-btn--lg {
  top: 28px;
}
.np-theme-personal .clear-btn--lg {
  top: 20px;
}
.clear-btn:not(.disabled):not(:disabled):hover,
.clear-btn:not(.disabled):not(:disabled):focus {
  color: #d03238;
  color: var(--color-interactive-negative-hover);
}
.clear-btn:not(.disabled):not(:disabled):active {
  color: #bf1e2c;
  color: var(--color-interactive-negative-active);
}
