// iOS Search Bar
// --------------------------------------------------

$search-bar-ios-background-color:     #c9c9ce !default;
$search-bar-ios-border-color:         $item-ios-border-color !default;
$search-bar-ios-padding:              0 8px !default;
$search-bar-ios-input-height:         28px !default;
$search-bar-ios-background-svg:       "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='#939398' 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='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$search-bar-ios-background-size:      13px 13px !default;


.search-bar[mode=ios] {
  padding: $search-bar-ios-padding;
  background: $search-bar-ios-background-color;
  border-bottom: 1px solid $search-bar-ios-border-color;

  .search-bar-icon {
    width: 100%;
    height: 13px;

    transform: translateX(calc(50% - 60px));
    -webkit-transform: translateX(-webkit-calc(50% - 60px));

    @include svg-background-image($search-bar-ios-background-svg);
    background-size: $search-bar-ios-background-size;
    background-repeat: no-repeat;
    position: absolute;
    left: 10px;
    top: 8px;
  }

  .search-bar-input {
    height: $search-bar-ios-input-height;
    padding: 0 28px;

    font-size: 1.4rem;
    font-weight: 400;

    border-radius: 5px;
    color: #000;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 8px center;

    @include calc(padding-left, "50% - 28px");
  }

  .search-bar-input-container.left-align {
    .search-bar-icon {
      transform: translateX(0);
    }
    .search-bar-input {
      padding-left: 28px;
    }
  }
}

.hairlines .search-bar[mode=ios] {
  border-bottom-width: 0.55px;
}