.ui-input {
  width: 100%;
  height: 60px;
  padding: 0 15px;
  display: block;

  font-size: 16px;
  font-weight: $font-weight-m;
  color: $color-gray-00;

  border: 1px solid $color-gray-05;
  border-radius: $border-radius-m;

  background: $color-gray-08;

  &::placeholder {
    color: $color-gray-02;
  }

  @at-root span#{&} {
    min-height: 60px;
    width: auto;
    height: auto;
    padding: 19px 15px;
    color: $color-gray-02;
    word-wrap: break-word;
  }

  @at-root textarea#{&} {
    min-height: 100px;
    padding: 19px 15px;
    display: block;
    overflow: hidden;
    resize: none;
  }

  &[type="search"]::-webkit-search-cancel-button {
    appearance: none;
  }
}

.ui-input-error {
  border-color: $color-red-00;
}

.ui-input_tip {
  padding-top: 2px;
  display: inline-block;
  font-size: $font-size-s;
}