/*
Forms.scss
==========================================================================
formsless contains generic form styles
*/

input {
  height: 32px;
  margin: 0;
}

input[type=text] {
  vertical-align: bottom;
  @include sans-font-regular;
  color: $black;
}

button {
  height: 32px;
  vertical-align: bottom;
  margin: 0;
  background-color: $action_color;
  color: $white;
  border: none;
  text-align: center;
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  transition: 0.1s;
}

button:hover,
button:active {
  background-color: $action_color_dark;
}

textarea:focus,
input:focus {
  border: 1px solid $action_color;
}

.file-upload {
  position: relative;
  overflow: hidden;
}

.file-upload input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity = 0);
  opacity: 0;
  outline: none;
  background: $white;
  cursor: inherit;
  display: block;
}

/*
Selects
--------------------------------
*/

.select-content {
  overflow: hidden; // this hides the select's drop button
  position: relative;
  background: $white url('../img/select.png') no-repeat bottom right;
  border: solid 1px $gray_light;
  height: 32px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .select-content {
    background: $white url('../img/select@2x.png') no-repeat bottom right;
    background-size: 32px 32px;
  }
}

select {
  width: 115%;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  border: none;
  box-shadow: none;
  padding: 0 10px; // add padding to the select, not the div
  color: $gray_darker;
  height: 32px;
}

.lt-ie9 {
  select {
    height: 24px;
  }
}
