@import "../settings/variables";
@import "../tools/forms";

.date-input {
  align-items: center;
  border: 1px solid $core-gray-85;
  border-radius: 4px;
  display: inline-flex;
  flex-direction: row;
  height: 36px;
  justify-content: center;
  padding: 0 spacing(xs);

  &:focus-within {
    @include focus();
  }

  &__delimiter {
    font-size: 14px;
    line-height: 20px;
    margin: 0 1px;
    user-select: none;
  }

  .date-input__delimiter.date-input__delimiter--visible {
    opacity: 1;
  }

  &__segment {
    font-size: 14px;
    outline: none;
    line-height: 20px;
    text-align: center;

    &:focus {
      background: $core-blue-94;
    }

    &::selection {
      background: transparent;
    }

    &--day,
    &--month {
      width: 26px;
    }

    &--year {
      width: 40px;
    }

    &--placeholder {
      color: $core-gray-45;
    }
  }

  &__icon-container {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    margin: 0 0 0 spacing(xs);
    width: 24px;
  }

  &__clear-icon {
    &:focus {
      @include focus();
    }
  }

  &--disabled,
  &:disabled {
    @include placeholder($input-disabled-text-color);
    border: 1px solid $input-disabled-border-color;
    color: $input-disabled-text-color;
    pointer-events: none;

    .date-input__segment {
      &--placeholder {
        color: $input-disabled-text-color;
      }
    }

    svg {
      color: $input-disabled-text-color;
    }
  }

  &--error {
    background-color: $input-error-background-color;
    border-color: $input-error-border-color;
    background-color: var(
      --core-input-error-background-color,
      $input-error-background-color
    );
    border-color: var(
      --core-input-error-border-color,
      $input-error-border-color
    );
  }

  &--focus-within,
  &:focus-within {
    background-color: $core-white;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
    color: $input-focus-color;
    outline: none;
  }
}

.date-input--table {
  &.date-input {
    background-color: transparent;
    border-color: transparent;
    font-size: $table-font-size;

    &:active:hover {
      border-color: $button-dropdown-border;
    }

    &:focus-within {
      @include focus();
      background-color: $table-background-color;
    }

    &--loading,
    &--open {
      border-color: $button-dropdown-border;
    }

    &--error {
      border-color: $input-error-border-color;
    }
  }

  & .date-input__icon-container,
  & .date-input__delimiter,
  & .date-input__segment--placeholder {
    opacity: 0;
  }

  &.date-input:focus-within {
    .date-input__delimiter,
    .date-input__icon-container,
    .date-input__segment--placeholder {
      opacity: 1;
    }

    &.date-input .date-input__clear-icon {
      display: inline-flex;
    }
  }

  // ------ IE11 ------
  // can't use focus-within on ie11 or edge so target all icon-containers following a segment in focus.
  // placeholder styles for segments/delimiters do not work on ie11 or edge

  // there were problems with pointer events in ie11, so hide icon (but leave container)
  &.date-input .date-input__clear-icon {
    display: none;
  }

  // show clear icon if a segment is in focus
  &.date-input .date-input__segment:focus ~ .date-input__icon-container {
    opacity: 1;

    .date-input__clear-icon {
      display: inline-flex;
    }
  }

  // needed for clicking clear icon in non-ie browsers
  &.date-input .date-input__icon-container:active {
    .date-input__clear-icon {
      display: inline-flex;
    }
  }

  // needed for clicking clear icon in ie
  &.date-input .date-input__clear-icon:focus {
    display: inline-flex;
  }
}