@import 'moda-themes/themes';

.mo-display-input__text {
  font-family: font-family('sans');
  width: fit-content;
  margin-right: 20px;
  margin-top: 10px;
  font-size: 12px;

  label {
    color: color('cement');
  }

  input {
    border: 1px solid color('elephant');
    width: var(--width);
    line-height: 2;
    color: color('black');
    display: block;
    padding: 12px;
    margin: 4px 0;
  }

  .mo-display-icon-exclamation-circle,
  .mo-display-icon-checkmark {
    position: relative;
    font-size: 18px;
    float: right;
    height: 18px;
    opacity: 0;
    top: 30px;
  }

  .mo-display-input-error {
    color: color('code-red');
  }

  .mo-display-icon-exclamation-circle {
    color: color('code-red');
    right: 8px;
  }

  .mo-display-icon-checkmark {
    color: color('money-good');
    left: 8px;
  }

  &[data-show-validation='false'] .mo-display-input-error {
    display: none;
  }

  &[data-show-validation='true'] {
    &[data-error=''] {
      .mo-display-icon-checkmark {
        opacity: 1;
      }
    }

    &:not([data-error='']) {
      input {
        border-color: color('code-red');
      }

      .mo-display-icon-exclamation-circle {
        opacity: 1;
      }
    }
  }
}