::placeholder
{
  color: var(--color-fg-light);
}

input[type="text"], input[type="color"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"], input[type="month"], input[type="number"],
input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"],
textarea, .ui-native-select
{
  @extend %font;
  background: var(--color-bg-light);
  border: 1px solid var(--color-line);
  font-size: $font-size;
  display: inline-block;
  height: 42px;
  padding: 6px 12px;
  line-height: 1.5;
  color: var(--color-fg);
  border-radius: var(--radius);
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;

  &:focus
  {
    /*border-color: var(--color-accent-info-bg);
    box-shadow: 0 0 0 4px var(--color-accent-info-bg);*/
  }

  &[disabled], &[readonly]
  {
    border-color: transparent !important;
    padding: 0;
    height: auto;
  }
}

textarea
{
  resize: vertical;
  min-height: 80px;
}

.ui-native-select
{
  position: relative;
  font-size: var(--font-size);

  select
  {
    @extend %font;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    padding-left: 9px;
    -webkit-appearance: none;
    border: none;
    font-size: var(--font-size);
  }

  &:after
  {
    @extend %font-icon;
    content: "\e842";
    position: absolute;
    right: 12px;
    top: 0;
    height: 42px;
    line-height: 40px;
  }
}