@import "../../../themes/ionic.globals.ios";

// iOS Searchbar
// --------------------------------------------------

/// @prop - Padding top/bottom of the searchbar
$searchbar-ios-padding-vertical: 0 !default;

/// @prop - Padding start/end of the searchbar
$searchbar-ios-padding-horizontal: 8px !default;

/// @prop - Background of the searchbar
$searchbar-ios-background-color: rgba(0, 0, 0, 0.2) !default;

/// @prop - Border color of the searchbar
$searchbar-ios-border-color: rgba(0, 0, 0, 0.05) !default;

/// @prop - Minimum height of the searchbar
$searchbar-ios-min-height: 44px !default;

/// @prop - Color of the searchbar input search icon
$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, 0.5) !default;

/// @prop - Svg for the searchbar input search icon
$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='fg-color' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;

/// @prop - Size of the searchbar input search icon
$searchbar-ios-input-search-icon-size: 13px !default;

/// @prop - Height of the searchbar input
$searchbar-ios-input-height: 30px !default;

/// @prop - Color of the searchbar input placeholder
$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, 0.5) !default;

/// @prop - Color of the searchbar input text
$searchbar-ios-input-text-color: #000 !default;

/// @prop - Background of the searchbar input
$searchbar-ios-input-background-color: #fff !default;

/// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default;

/// @prop - Transition of the searchbar input cancel button
$searchbar-ios-cancel-transition: all 300ms ease !default;

/// @prop - Color of the searchbar input clear icon
$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, 0.5) !default;

/// @prop - Svg for the searchbar input clear icon
$searchbar-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='fg-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;

/// @prop - Size of the searchbar input clear icon
$searchbar-ios-input-clear-icon-size: 18px !default;

/// @prop - Background of the searchbar input inside of a toolbar
$searchbar-ios-toolbar-input-background: rgba(0, 0, 0, 0.08) !default;

// Searchbar
// -----------------------------------------

.searchbar-ios {
  min-height: $searchbar-ios-min-height;
  background: $searchbar-ios-background-color;
  border-top: $hairlines-width solid transparent;
  border-bottom: $hairlines-width solid $searchbar-ios-border-color;
  
  @include padding($searchbar-ios-padding-vertical, $searchbar-ios-padding-horizontal);
}

// Searchbar Mixin for Icons
// -----------------------------------------

@mixin ios-searchbar-icon($svg-icon, $fg-color) {
  $svg: str-replace($svg-icon, "fg-color", $fg-color);
  
  @include svg-background-image($svg, true);
}

// Searchbar Search Icon
// -----------------------------------------

.searchbar-ios .searchbar-search-icon {
  position: absolute;
  width: $searchbar-ios-input-search-icon-size + 1;
  height: $searchbar-ios-input-search-icon-size + 1;
  background-repeat: no-repeat;
  background-size: $searchbar-ios-input-search-icon-size;
  
  @include position(9px, null, null, 9px);
  @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
  @include margin-horizontal(calc(50% - 60px), null);
}

// Searchbar Input Field
// -----------------------------------------

.searchbar-ios .searchbar-input {
  height: $searchbar-ios-input-height;
  font-size: 14px;
  font-weight: 400;
  color: $searchbar-ios-input-text-color;
  background-color: $searchbar-ios-input-background-color;
  
  @include placeholder($searchbar-ios-input-placeholder-color);
  @include padding(0, 28px);
  @include border-radius(5px);
}

// Searchbar Clear Input Icon
// -----------------------------------------

.searchbar-ios .searchbar-clear-icon {
  position: absolute;
  width: 30px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: $searchbar-ios-input-clear-icon-size;
  
  @include position(0, 0, null, null);
  @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
  @include background-position(center);
}

// Searchbar Cancel (iOS only)
// -----------------------------------------

.searchbar-ios .searchbar-ios-cancel {
  display: none;
  height: 30px;
  cursor: pointer;
  flex-shrink: 0;
  
  @include padding(0, 0, 0, 8px);
  @include margin-horizontal(0, null);
}

// Searchbar Left Aligned (iOS only)
// -----------------------------------------

.searchbar-ios.searchbar-left-aligned .searchbar-search-icon {
  @include margin-horizontal(0, null);
}

.searchbar-ios.searchbar-left-aligned .searchbar-input {
  @include padding-horizontal(30px, null);
}

// Searchbar Has Focus
// -----------------------------------------

.searchbar-ios.searchbar-show-cancel.searchbar-has-focus .searchbar-ios-cancel {
  display: block;
}

// Searchbar in Toolbar
// -----------------------------------------

.toolbar .searchbar-ios {
  background: transparent;
  border-bottom-width: 0;
}

.toolbar .searchbar-ios .searchbar-input {
  background: $searchbar-ios-toolbar-input-background;
}

.toolbar .searchbar-ios .searchbar-ios-cancel {
  @include padding(0);
}

.toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel {
  @include padding-horizontal(8px, null);
}

// Searchbar Cancel (MD only)
// -----------------------------------------

.searchbar-ios .searchbar-md-cancel {
  display: none;
}

// Generate Default Search Bar Colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
  $fg-color: rgba($color-contrast, 0.5);
  
  .searchbar-ios-#{$color-name} .searchbar-ios-cancel {
    color: $color-base;
  }
  
  .searchbar-ios-#{$color-name} .searchbar-ios-cancel:hover:not(.disable-hover) {
    color: color-shade($color-base);
  }
  
  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-search-icon {
    @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $fg-color);
  }
  
  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-input {
    color: $color-contrast;
    background: rgba($color-contrast, 0.08);
    
    @include placeholder($fg-color);
  }
  
  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-clear-icon {
    @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $fg-color);
  }
  
  .toolbar-ios-#{$color-name} .searchbar-ios .searchbar-ios-cancel {
    color: color-contrast($colors-ios, $color-base, ios);
  }
  
}

// Searchbar animation
// -----------------------------------------

.searchbar-ios.searchbar-animated.searchbar-show-cancel .searchbar-ios-cancel {
  display: block;
}

.searchbar-ios.searchbar-animated .searchbar-search-icon,
.searchbar-ios.searchbar-animated .searchbar-input {
  transition: $searchbar-ios-input-transition;
}

.searchbar-animated.searchbar-has-focus .searchbar-ios-cancel {
  pointer-events: auto;
  opacity: 1;
}

.searchbar-animated .searchbar-ios-cancel {
  pointer-events: none;
  opacity: 0;
  transition: $searchbar-ios-cancel-transition;
  
  @include margin-horizontal(null, -100%);
  @include transform(translate3d(0, 0, 0));
}