@import '../../../../styles/common.scss';
@import '../../Filter/Filter.scss';

.container {
  display: grid;

  .dateTimeInputWrapper {
    border: $input-inactive;

    &:focus-within {
      border: $input-active;
    }
  }
  .dateTimeInput {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr min-content;

    place-items: center;
    border: 2px solid transparent;

    &:focus-within {
      border: none;
    }

    .inputValue {
      &:focus {
        border: none;
      }

      color: var(--input-color, $input-color);
      padding: 0 12px;
      border: none;
      font-size: var(--label-font-size, $label-font-size);
      outline: none;

      height: 50px;
      width: 100%;
    }

    .button {
      svg {
        height: 60%;
      }

      /* default icon colors */
      svg * {
        stroke: var(
          --filter-context-button-color,
          $filter-context-button-color
        );
      }

      &:hover,
      &:focus,
      &:focus-visible {
        background-color: var(
          --filter-context-button-color,
          $filter-context-button-color
        );

        svg * {
          stroke: #ffffff;
        }
      }

      &.hasError {
        border: 3px solid
          var(--input-invalid-border-color, $input-invalid-border-color);
      }
    }
  }

  small {
    padding: 6px;
    place-self: start;
    color: var(--input-invalid-color, $input-invalid-color);
  }
}

.picker {
  overflow: visible;
  z-index: 99999;
}
