@import (reference) "../../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";

.np-date-trigger {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  .np-theme-personal & {
    padding-left: var(--size-16);
  }
}

.clear-btn {
  transition: color 0.15s ease-in-out;
  color: var(--color-interactive-secondary);
  position: absolute;
  top: var(--size-16);
  .right(var(--size-16));

  .np-theme-personal & {
    top: var(--size-8);
    .right(var(--size-8));
  }

  &--sm {
    top: var(--size-8);

    .np-theme-personal & {
      top: 0;
    }
  }

  &--lg {
    top: 28px;

    .np-theme-personal & {
      top: 20px;
    }
  }

  &:not(.disabled, :disabled):hover,
  &:not(.disabled, :disabled):focus {
    color: var(--color-interactive-negative-hover);
  }

  &:not(.disabled, :disabled):active {
    color: var(--color-interactive-negative-active);
  }
}
