@use 'src/styles/abstracts' as *;

.InputWrapper {
  &_textFieldCnt {
    color: $pico-80;

    .MuiOutlinedInput-notchedOutline {
      border-color: $cuddle;
    }

    .MuiInputBase-input:focus {
      & + .MuiOutlinedInput-notchedOutline {
        border-color: $cuddle-110;
      }
    }
  }

  &_default {
  }

  &_topLabeled {
    .InputWrapper_topLabelCnt {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .MuiOutlinedInput-root {
      border-radius: 2px;
    }

    .MuiFormLabel-root {
      display: none;
    }

    legend {
      width: 0;
    }
  }

  &_small {
    .InputWrapper_topLabelCnt {
      .Icon__container {
        font-size: $text-sm;
      }
    }

    .MuiOutlinedInput-input {
      padding: $space-xxxs $space-xxs;
    }

    .MuiInputBase-input {
      font-size: $text-xxs;
    }

    .InputWrapper_topLabelCnt {
      line-height: 10px;
      margin-bottom: $space-xxxs;
    }

    .MuiOutlinedInput-input {
      padding: $space-xxxs $space-xxs;
    }
  }

  &_medium {
    .MuiOutlinedInput-input {
      padding: $space-xs $space-unit;
    }


    .MuiInputLabel-root {
      font-size: $text-md;
    }

    .MuiInputBase-input {
      font-size: $text-md;
      line-height: $space-unit;
      height: unset;
    }

    .MuiInputLabel-outlined:not(.MuiInputLabel-shrink) {
      transform: translate(14px, 8px) scale(1);
    }
  }

  &_large {
  }

  &_error {
    .MuiOutlinedInput-root.Mui-error,
    .MuiOutlinedInput-root:hover,
    .MuiOutlinedInput-root.Mui-focused {
      .MuiOutlinedInput-notchedOutline {
        border-color: $error-color !important; // TODO remove !important rule from the _Input.scss line:26
      }
    }
  }
}

.InputWrapper_textFieldCnt_tooltip_error {
  white-space: pre;
  background-color: $error-color;
  left: 6px;
  top: -10px;

  .arrow {
    color: $error-color;
  }
}
