@import "./properties.css";
@import "../z-index.css";

.dateInput,
.dateInput * {
  box-sizing: border-box;
  outline: none;
}

.dateInput {
  align-items: center;
  background-color: var(--date-input-background-color);
  border: var(--date-input-border);
  border-radius: var(--date-input-border-radius);
  display: inline-flex;
  font-family: var(--date-input-font-family);
  font-size: var(--date-input-font-size);
  height: var(--date-input-height);
  padding: var(--date-input-padding);
  position: relative;
  transition: var(--date-input-transition);
  vertical-align: text-top;
  white-space: nowrap;

  &.active,
  &.focus {
    border-color: var(--date-input-focus-color);
  }

  &.error {
    border-color: var(--date-input-error-color);
  }
}

.dateSelector {
  left: var(--date-input-date-selector-left);
  position: absolute;
  top: calc(100% + var(--date-input-date-selector-top));
  z-index: var(--date-selector-z-index);
}

.start,
.end {
  align-items: center;
  display: flex;
  height: 100%;
  padding-left: var(--date-input-input-padding-left);
  padding-right: var(--date-input-input-padding-right);
  position: relative;

  &.active,
  &.focus {
    background-color: var(--date-input-focus-background);
  }

  &.error {
    background-color: var(--date-input-error-background);
  }
}

.icon {
  align-items: center;
  color: var(--date-input-input-icon-color);
  display: flex;
  font-size: var(--date-input-input-icon-size);
  margin-right: var(--date-input-icon-margin-right);
}

.error .icon {
  color: var(--date-input-error-color);
}

.active .icon,
.focus .icon {
  color: var(--date-input-focus-color);
}

.input,
.expander {
  border: 0;
  color: var(--date-input-input-color);
  font-family: var(--date-input-font-family);
  font-size: var(--date-input-font-size);
  padding: 0;
  white-space: pre;
}

.expander {
  visibility: hidden;
}

.input:placeholder {
  color: var(--date-input-input-color);
}

.input {
  background-color: transparent;
  height: 100%;
  left: var(--date-input-input-padding-left);
  position: absolute;
  top: 0;
  width: calc(100% - var(--date-input-input-padding-right));
}

.separator {
  background: var(--date-input-separator-color);
  height: var(--date-input-separator-height);
  margin: var(--date-input-separator-margin);
  width: var(--date-input-separator-width);
}

.active .separator,
.focus .separator {
  background-color: var(--date-input-focus-color);
}

.error .separator {
  background-color: var(--date-input-error-color);
}