$v-textfield-bevel-style: inset 0 1px 0 shade, 0 1px 0 hilite !default;
$v-textfield-bevel-depth: $v-bevel-depth !default;
$v-textfield-shadow-style: none !default;
$v-textfield-shadow-depth: $v-shadow-depth !default;
$v-textfield-background-color: null !default;
$v-textfield-unit-size: null !default;
$v-textfield-font-weight: 400 !default;
$v-textfield-font-size: $v-font-size !default;
$v-textfield-border-width: $v-border-width !default;
$v-textfield-border-radius: $v-border-radius !default;
$v-textfield-disabled-opacity: $v-disabled-opacity !default;



@function v-valo-textfield-background-color ($context) {
  $bg-color: lighten($context, 8%);
  @if is-dark-color($context) {
    $bg-color: darken($context, 4%);
  }
  @return $bg-color;
}





@function v-valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
                                       $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
  @if $bevel-depth == 0 and $shadow-depth == 0 {
    @return null;
  }
  $_bevel: v-valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%));
  $_shadow: v-valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth);

  @if $_bevel and $_shadow {
    @return $_bevel, $_shadow;
  } @else if $_bevel {
    @return $_bevel;
  } @else if $_shadow {
    @return $_shadow;
  } @else {
    @return null;
  }

}




@mixin v-valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) {
  height: $unit-size;
  $padding-width: ceil($unit-size/6);
  @if $border-radius {
    $padding-width: $padding-width + ceil($border-radius/3);
  }
  padding: ceil($unit-size/9) $padding-width;
}



@function v-valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
                                         $background-color: $v-textfield-background-color) {
  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
  $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color);
  $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2)));
  $border-color: scale-color($border-color, $saturation: -$bevel-depth/2);
  @return $border-color;
}




@mixin v-valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                               $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
                               $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
                               $background-color: $v-textfield-background-color) {

  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
  $unit-size: $unit-size or $v-unit-size;
  
  @include appearance(none);
  margin: 0;
  font: inherit;
  font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null);
  font-weight: $v-textfield-font-weight;
  @include v-valo-textfield-size($unit-size, $border-radius);
  border-radius: $border-radius;
  border: $v-textfield-border-width solid v-valo-textfield-border-color($bevel-style, $bevel-depth, $background-color);
  background: $background-color;
  color: v-valo-font-color($background-color);
  box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);

  @if $v-animations-enabled {
    @include transition(box-shadow 180ms, border 180ms);
  }

  &.v-disabled {
    @include opacity($v-textfield-disabled-opacity);
  }

  &:focus {
    @include v-valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
  }
  
  // TODO allow parent selector to be used in interpolation
  &.v-textfield-prompt,
  &.v-textarea-prompt {
    @include v-valo-textfield-prompt-style($background-color);
  }

}


@mixin v-valo-textfield-prompt-style ($background-color) {
  $font-color: v-valo-font-color($background-color);
  $font-color: mix($background-color, $font-color);
  @if is-dark-color($background-color) and saturation($background-color) > 50% {
    $font-color: scale-color($font-color, $lightness: 20%);
  }
  $font-color: scale-color($font-color, $saturation: saturation($font-color));
  color: $font-color;
}


@mixin v-valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
                                     $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
  outline: none;
  @if $v-animations-enabled {
    @include transition(none);
  } 
  
  $focus-color: v-valo-focus-color();
  
  @if color-luminance($focus-color) + 50 < color-luminance($v-app-background-color) {
    border-color: $focus-color;
  }
  
  box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), 
              v-valo-focus-box-shadow($color: $focus-color);
}


@mixin v-valo-textfield-readonly-style {
  background: transparent;
  box-shadow: none;
  &:focus {
    box-shadow: v-valo-focus-box-shadow();
  }
}


@mixin v-valo-textfield ($primary-stylename: v-textfield) {
  
  .#{$primary-stylename} {
    @include v-valo-textfield-style;
    width: $v-default-field-width;
  }
  
  .#{$primary-stylename}-readonly {
    @include v-valo-textfield-readonly-style;
  }
  
}



@mixin v-valo-textfield-borderless-style ($background-color: transparent) {
  border: none;
  border-radius: 0;
  background: $background-color;
  box-shadow: none;

  &:focus {
    box-shadow: none;
  }
}



@mixin v-valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) {
  .v-slot-#{$stylename} {
    position: relative;
  }

  .v-caption-#{$stylename} {
    padding: 0;

    .v-captiontext {
      @include v-valo-caption-style;
      margin: 0;
    }

    .v-icon {
      position: absolute;
      z-index: 10;
    }

    // Font icons
    span.v-icon {
      left: $v-textfield-border-width;
      bottom: $v-textfield-border-width;
      width: $unit-size;
      line-height: $unit-size - $v-textfield-border-width*2;
      text-align: center;
      font-size: $font-size;
    }

    // Image icons
    img.v-icon {
      left: round(($unit-size - $image-icon-size)/2);
      bottom: round(($unit-size - $image-icon-size)/2);
    }
  }

  .#{$primary-stylename}-#{$stylename},
  .v-textarea-#{$stylename} {
    padding-left: $unit-size;
  }
}