@import '~react-flex/index.css';

.react-date-field {
  &,
  & * {
    box-sizing: border-box;
  }

  border: 1px solid gray;
  position: relative;
  overflow: visible;

  .date-picker {
    width: 100%;
    min-width: 250px;
    min-height: 280px;
    position: absolute;
    left: -1px;
    top: 100%;
  }
}

.react-date-field__input {
  padding: 5px;
  border: none;
  outline: none;
}

.react-date-field__calendar-icon {
  border: 3px solid gray;
  padding: 5px;
  margin: 2px 4px 2px 2px;
  position: relative;
  top: 1px;
  cursor: pointer;
}

$hoverColor: darken(gray, 20%);

.react-date-field__clear-icon {
  color: gray;
  margin: 0px 2px;
  cursor: pointer;
}

.react-date-field__clear-icon:hover {
  color: $hoverColor;
}

.react-date-field__calendar-icon:hover {
  border-color: $hoverColor;

  &:after,
  &:before,
  .react-date-field__calendar-icon-inner {
    background: $hoverColor;
  }
}

.react-date-field__calendar-icon:after,
.react-date-field__calendar-icon:before {
  content: '';
  width: 3px;
  height: 6px;
  left: 1px;
  top: -6px;
  position: absolute;
  background: gray;
}

.react-date-field__calendar-icon:after {
  left: auto;
  right: 0px;
}

.react-date-field__calendar-icon-inner {
  background: gray;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 3px;
  height: 3px;
}