@import "./variables.css";

.root {
  position: relative;
  box-sizing: border-box;
  font-family: inherit;
  & *,
  & *:before,
  & *:after {
    box-sizing: inherit;
  }
}

.disabled {
  opacity: 0.4;
  cursor: default;
  &:focus {
    border: none !important;
  }
  &:active {
    transform: none !important;
  }

  /* prevents buttons inside inputs to be double-dimmed */
  & .disabled {
    opacity: 1;
  }
}

.label {
  display: block;
  margin-bottom: 0.5em;
  margin-left: 0.25em;
  font-size: var(--mechanic-label-font-size);
  font-family: inherit;
  width: 100%;
}

.input-wrapper {
  width: 100%;
  position: relative;
}

.input,
.button {
  position: relative;
  z-index: 9;
  margin: 0;
  border: 1px solid currentColor;
  color: currentColor;
  border-radius: var(--mechanic-input-height-half);
  display: flex;
  align-items: center;
  height: var(--mechanic-input-height);
  line-height: 1;
  background-color: var(--mechanic-background);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  width: 100%;

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.input {
  padding: 0 var(--mechanic-input-height) 0 var(--mechanic-input-height-quart);
}

.button {
  justify-content: center;
  padding: 0 var(--mechanic-input-height-quart);
  transition: transform 0.1s ease;
}

.root:not(.disabled) .button:hover,
.button:not(.disabled):not([disabled]):hover {
  /* transform: translateY(-1px); */
  cursor: pointer;
}

.button:active {
  transform: translateY(1px);
}

.input::placeholder {
  color: currentColor;
  opacity: 0.6;
}

.focus .input {
  outline: none;
  border: 2px solid currentColor;
  padding-left: calc(var(--mechanic-input-height-quart) - 1px);
  padding-right: calc(var(--mechanic-input-height) - 1px);
}

.focus .button,
.button.focus {
  outline: none;
  border: 2px solid currentColor;
  padding-left: calc(var(--mechanic-input-height-quart) - 1px);
  padding-right: calc(var(--mechanic-input-height-quart) - 1px);
}

.focus.disabled .button,
.button.focus.disabled {
  border: 1px solid currentColor;
}

.suffix {
  pointer-events: none;
  position: absolute;
  z-index: 10;
  right: 2px;
  top: 2px;
  border-radius: var(--mechanic-input-height-half);
  text-align: right;
  background: var(--mechanic-background);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: calc(var(--mechanic-input-height) - 4px);
  padding: 0 var(--mechanic-input-height-quart);
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mechanic-input-height);
  z-index: 8;
  background-color: white;
  border-radius: var(--mechanic-input-height-half);
}

.invalid .background:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.15;
  border-radius: var(--mechanic-input-height-half);
  background-color: currentColor;
  z-index: 9;
}
.error {
  padding: 0.2em 0.25em;
  font-size: var(--mechanic-label-font-size);
}
