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

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;

  place-items: center;

  .inputValue {
    color: var(--input-color, $input-color);
    padding: 0 12px;

    font-size: var(--label-font-size, $label-font-size);
    outline: none;

    height: 50px;
    width: 100%;

    &.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);
  }
}

.noDataMessage {
  color: var(--filter-light-font-color, $filter-light-font-color);
  font-size: var(--filter-font-size, $filter-font-size);
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 50px;
  place-content: space-between;
  place-items: center;
  padding: 0 12px;
}
