@import "variables";

input {
  &[type="text"],&[type="search"],&[type="number"],&[type="email"],&[type="password"] {
    outline: none;
    width: 100%;
    @include border($input-border-color);
    height: em-calc(40px);
    color: $white-color;
    padding: 0 em-calc(12px);
    background: $input-background-color;
    font-family: inherit;
    font-size: inherit;
    margin: 0 0 em-calc(16px);
    transition: color $global-transition-duration ease, border-color $global-transition-duration ease;
  }
  &:focus {
    border-color: rgba($button-color, 0.5);
    box-shadow: 0 0 4px 0 $button-color;
  }
  &::placeholder {
    font-weight: normal;
    color: $placeholder-color;
  }
  &:disabled {
    border-color: $disabled-input-border-color;
    background: $disabled-input-background-color;
    color: $disabled-input-text-color;
    cursor: not-allowed;
  }
  &.input--clean {
    background: transparent;
    border-color: transparent;
    vertical-align: baseline;
    width: auto;
    min-width: 60px;
    &:focus {
      @include border($input-border-color);
      background: $input-background-color;
    }
  }
}

textarea {
  outline: none;
  width: 100%;
  @include border($input-border-color);
  height: 80px;
  color: $white-color;
  padding: 5px 5px;
  padding: em-calc(12px);
  background: $input-background-color;
  font-family: inherit;
  font-size: inherit;
  margin: 0 0 em-calc(16px);
  resize: vertical;

  &:focus {
    border-color: rgba($button-color, 0.5);
    box-shadow: 0 0 4px 0 $button-color;
  }
  &::-webkit-input-placeholder {
    font-weight: normal;
    color: $placeholder-color;
  }
}

.textarea {
  &--resize-horizontal {
    resize: horizontal;
  }
  &--resize-both {
    resize: both;
  }
  &--resize-none {
    resize: none;
  }
}

select {
  font-size: inherit;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.column--form {
  @extend .small-12;
  @extend .medium-6;
  &__label {
    @extend .large-3;
    p,
    label {
      margin-top: em-calc(8px);
      display: block;
    }
  }
  &__input {
    @extend .large-4;
  }
  &__note {
    padding-right: 4%;
    font-size: em-calc(13px);
    margin-top: 0;
    @extend .quiet;
    line-height: 1.6;
  }
}