$search-bar-height: 36px !default;
$search-bar-padding-hor: 8px !default;

$search-bar-border-radius: 4px !default;

$search-bar-font-size: 14px !default;
$search-bar-color: $dark-black !default;
$search-bar-placeholder-color: $gray !default;
$search-bar-input-padding-left: 4px !default;

$search-bar-wrapper-padding: 20px !default;

$search-bar-theme-colors: (
  'gray': #f6f6f6,
  'white': $white,
  'transparent': transparent
) !default;

.mx {

  &-search-bar-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: $search-bar-wrapper-padding;

    @each $name, $color in $search-bar-theme-colors {
      &--#{$name}{
        @if($name == 'gray'){
          background: $white;
        }
        @if($name == 'white'){
          background: #eeeeee;
        }
        @if($name == 'transparent'){
          background: transparent;
        }
      }
    }

    .mx-search-bar{
      flex: 1;
      display: flex;
      flex-direction: row;

      padding-left: $search-bar-padding-hor;
      padding-right: $search-bar-padding-hor;

      height: $search-bar-height;
      line-height: $search-bar-height;

      border-radius: $search-bar-border-radius;

      &--round,
      &[round] {
        border-radius: $search-bar-height / 2;
      }

      @each $name, $color in $search-bar-theme-colors {
        &--#{$name}{
          @if($name == 'transparent'){
            background: rgba($white,0.2);
            color: $white;
          }@else{
            background: $color;
            color: $dark-black;
          }
        }
      }

      &-prefix{
        .mx-icon-return{
          color: $dark-black;
          margin-right: 24px;
        }
      }

      &-content{
        flex: 1;

        &-input{
          width: 100%;
          padding-left: $search-bar-input-padding-left;
          padding-right: 0;
          padding-top: 0;
          padding-bottom: 0;

          background: transparent;

          border: none;
          outline: none;

          color: inherit;
          line-height: inherit;
          font-size: $search-bar-font-size;
          font-weight: bold;

          &::placeholder {
            color: $search-bar-placeholder-color;
            font-weight: normal;
          }
        }
      }

      &-suffix{
        padding-left: 16px;
        
        &-cancel{
          font-size: 16px;
          color: #666666;
          cursor: pointer;
          user-select: none;
        }
      }
    }
  }
}