/* stylelint-disable selector-max-class */
@import "./properties.css";
@import "../../z-index.css";

.input {
  display: flex;
  width: 100%;
}

.input,
.input * {
  box-sizing: border-box;
}

.boxContainer {
  flex: 1;
}

.container {
  padding-top: var(--input-container-padding);
  position: relative;
}

.container * {
  font-family: var(--input-font-family);
  letter-spacing: var(--input-container-letter-spacing);
}

.dark {
  color: var(--form-item-dark-color);
  -webkit-text-fill-color: var(--form-item-dark-color);

  & .container > textarea,
  & .container > input {
    color: var(--form-placeholder-dark-color);
    -webkit-text-fill-color: var(--form-placeholder-dark-color);
  }

  & .container > label {
    color: var(--form-item-dark-label-color);
    -webkit-text-fill-color: var(--form-item-dark-label-color);
  }

  & .secondaryText {
    color: var(--form-item-dark-color);
    -webkit-text-fill-color: var(--form-item-dark-color);
  }

  &.disabled .secondaryText {
    color: var(--form-dark-color-disabled);
    -webkit-text-fill-color: var(--form-dark-color-disabled);
  }

  & .container > textarea:disabled,
  & .container > input:disabled {
    border-color: var(--form-dark-border-color-disabled);
    color: var(--form-dark-color-disabled);
    -webkit-text-fill-color: var(--form-dark-color-disabled);
  }

  & .container > textarea:disabled ~ label,
  & .container > input:disabled ~ label {
    color: var(--form-dark-color-disabled);
    -webkit-text-fill-color: var(--form-dark-color-disabled);
  }

  & .disabled .icon {
    color: var(--form-icon-color);
    -webkit-text-fill-color: var(--form-icon-color);
  }
}

.light {
  color: var(--form-item-light-color);
  -webkit-text-fill-color: var(--form-item-light-color);

  & .container > textarea,
  & .container > input {
    color: var(--form-placeholder-light-color);
    -webkit-text-fill-color: var(--form-placeholder-light-color);
  }

  & .secondaryText {
    color: var(--form-item-light-color);
    -webkit-text-fill-color: var(--form-item-light-color);
  }

  &.disabled .secondaryText {
    color: var(--form-light-color-disabled);
    -webkit-text-fill-color: var(--form-light-color-disabled);
  }

  & .container > textarea:disabled,
  & .container > input:disabled {
    border-color: var(--form-light-border-color-disabled);
    color: var(--form-light-color-disabled);
    -webkit-text-fill-color: var(--form-light-color-disabled);
  }

  & .disabled .secondaryText,
  & .container > textarea:disabled ~ label,
  & .container > input:disabled ~ label {
    color: var(--form-light-color-disabled);
    -webkit-text-fill-color: var(--form-light-color-disabled);
  }

  & .disabled .icon {
    color: var(--form-icon-color);
    -webkit-text-fill-color: var(--form-icon-color);
  }
}

.container > textarea,
.container > input {
  background: none;
  border-color: var(--input-textarea-border-color);
  border-radius: var(--input-textarea-border-radius);
  border-style: var(--input-textarea-border-style);
  border-width: var(--input-textarea-border-width);
  color: var(--input-color);
  -webkit-text-fill-color: var(--input-color);
  caret-color: var(--input-textarea-caret-default-color);
  display: block;
  font-size: var(--input-font-size);
  min-width: 100%;
}

.container > input {
  padding-top: var(--input-padding-top);
  padding-bottom: var(--input-padding-bottom);
}

.container > textarea {
  padding: 0;
  margin: 0;
  resize: none;
  z-index: var(--textarea-z-index);
  position: absolute;
  height: var(--input-textarea-height);
  overflow: hidden;
}

.container > textarea::placeholder,
.container > input::placeholder {
  opacity: var(--input-textarea-placeholder-opacity);
}

.container > label {
  color: var(--input-label-color);
  -webkit-text-fill-color: var(--input-label-color);
  font-size: var(--input-label-font-size-default);
  pointer-events: none;
  position: absolute;
  top: var(--input-label-top);
  transition: var(--input-label-transition-time) ease all;
  white-space: nowrap;
}

.container .contentPresent {
  font-size: var(--input-label-font-size-focus);
  top: var(--input-multiline-content-present-top);
}

.secondaryText {
  font-size: var(--input-secondary-text-font-size);
  margin: 0;
  margin-top: var(--input-secondary-text-margin-top);
  text-align: left;
  width: 100%;
}

/* multiline */

.multiline {
  height: auto;
  padding-top: var(--input-container-textarea-padding-top);
}

.multiline > .expander {
  white-space: pre-wrap;
  visibility: hidden;
  min-height: var(--input-multiline-expander-min-height);
  word-wrap: break-word;
}

.multiline > .expander,
.multiline textarea {
  font-size: var(--input-multiline-font-size);
  line-height: var(--input-multiline-line-height);
  padding-bottom: var(--input-multiline-padding-bottom);
  padding-left: var(--input-multiline-padding-left);
  padding-right: var(--input-multiline-padding-right);
  word-break: break-word;
}

/* hover */

.container > textarea:hover,
.container > input:hover {
  border-color: var(--input-textarea-hover-border-color);
  transition: border-color var(--input-textarea-focus-transition-time) ease;
}

/* focus */

.container > textarea:focus::placeholder,
.container > input:focus::placeholder {
  opacity: var(--input-textarea-focus-placeholder-opacity);
  color: var(--input-textarea-focus-placeholder-color);
  -webkit-text-fill-color: var(--input-textarea-focus-placeholder-color);
  font-size: var(--input-font-size);
}

.container > textarea:focus,
.container > input:focus {
  border-color: var(--input-textarea-focus-border-color);
  outline: none;
  transition: border-color var(--input-textarea-focus-transition-time) ease;
}

.container > textarea:focus ~ label,
.container > input:focus ~ label {
  -webkit-text-fill-color: var(--input-label-color-focus);
  color: var(--input-label-color-focus);
  font-size: var(--input-label-font-size-focus);
  top: var(--input-textarea-label-top);
}

/* icon */

.icon {
  padding-top: var(--input-icon-padding);
  margin-right: var(--input-icon-margin);
  color: var(--input-icon-inactive-color);
  -webkit-text-fill-color: var(--input-icon-inactive-color);
}

.active .icon {
  color: var(--input-icon-active-color);
  -webkit-text-fill-color: var(--input-icon-active-color);
}

.displayPasswordIcon {
  appearance: none;
  background: none;
  border: none;
  bottom: var(--input-display-password-icon-bottom);
  cursor: pointer;
  right: var(--input-display-password-icon-right);
  outline: none;
  position: absolute;
}

/* error */

.error textarea:focus ~ label,
.error input:focus ~ label,
.error .secondaryText,
.error .contentPresent {
  color: var(--input-color-error);
  -webkit-text-fill-color: var(--input-color-error);
}

.error textarea,
.error input,
.error textarea:hover,
.error input:hover,
.error textarea:focus,
.error input:focus {
  border-color: var(--input-color-error);
}

/* disabled */

.disabled,
.container > input:disabled,
.container > textarea:disabled {
  cursor: not-allowed;
}