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

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-dim);
  //border: 1px solid var(--color-bg-bright-three);
  border: none;
  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);
    background: none;
    color: var(--color-fg);
  }

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

.ui-native-check
{
  position: relative;
  top: 1px;
  font-size: var(--font-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;

  input
  {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-appearance: none;
    border: none;
  }
}

.ui-native-check-toggle
{
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--color-bg-bright-three);
  margin-right: 10px;
  position: relative;
  top: -1px;

  &:before
  {
    content: "\e83f";
    @extend %font-icon;
    color: transparent;
    font-size: var(--font-size-xs);
  }

  input:checked ~ &
  {
    background: var(--color-primary);

    &:before
    {
      color: var(--color-primary-fg);
    }
  }
}