@import "../../globals.ios";
@import "./input";

// iOS Input
// --------------------------------------------------

$text-input-ios-background-color:          $list-ios-background-color !default;

$text-input-ios-margin-top:                $item-ios-padding-top !default;
$text-input-ios-margin-right:              ($item-ios-padding-right / 2) !default;
$text-input-ios-margin-bottom:             $item-ios-padding-bottom !default;
$text-input-ios-margin-left:               0 !default;

$text-input-ios-input-clear-icon-width:    30px !default;
$text-input-ios-input-clear-icon-color:    rgba(0, 0, 0, .5) !default;
$text-input-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $text-input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$text-input-ios-input-clear-icon-size:     18px !default;


// iOS Default Input
// --------------------------------------------------

.text-input {
  margin: $text-input-ios-margin-top $text-input-ios-margin-right $text-input-ios-margin-bottom $text-input-ios-margin-left;
  padding: 0;

  width: calc(100% - #{$text-input-ios-margin-right} - #{$text-input-ios-margin-left});
}


// iOS Inset Input
// --------------------------------------------------

.inset-input {
  margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
  padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}


// iOS Stacked & Floating Inputs
// --------------------------------------------------

.item-label-stacked .text-input,
.item-label-floating .text-input {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 0;

  width: calc(100% - #{$text-input-ios-margin-right});
}

.item-label-stacked ion-select,
.item-label-floating ion-select {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 0;
}

.item-label-floating .text-input.cloned-input,
.item-label-stacked .text-input.cloned-input {
  top: 30px;
}


// iOS Clear Input Icon
// --------------------------------------------------

ion-input[clearInput] {
  position: relative;

  .text-input {
    padding-right: $text-input-ios-input-clear-icon-width;
  }
}

.text-input-clear-icon {
  @include svg-background-image($text-input-ios-input-clear-icon-svg);

  right: ($item-ios-padding-right / 2);
  bottom: 0;

  width: $text-input-ios-input-clear-icon-width;

  background-size: $text-input-ios-input-clear-icon-size;
}