@use "../../../1-settings/class-vars";
@use "../../../2-tools/tools-index";

#{class-vars.$base-class} {
  .date-input {
    &[type="text"] {
      padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
      &.text-input--clear-icon-visible {
        padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
      }
    }
    &__calendar-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: var(--spacing-2xs);
      font-weight: var(--font-weight-normal);
      [class*="utds-icon-before-"]::before {
        font-size: 1.1rem;
        margin: 0;
      }
      &--is-disabled {
        color: var(--form-ele-disabled-color);
      }
      &[disabled]:active {
        transform: translateY(-50%);
      }
    }
    &__icon-static {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: var(--form-ele-small);
      min-width: var(--form-ele-small);
    }
    &__inner-wrapper {
      .text-input__clear-button {
        right: var(--spacing-xl);
      }
      .input-wrapper--text-input {
        margin: 0;
      }
      .tooltip__wrapper {
        z-index: 2001;
      }
    }
    &__popup {
      background: white;
      border-radius: var(--radius-small);
      border: 1px solid var(--gray-3-1-contrast);
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      z-index: 2000;
      overflow: hidden;

      .input-wrapper--calendar-input {
        margin: 0;
      }
    }
  }
}