@mixin search-box {
  form { 
    input[type=text] {
      border: 0;
      border-bottom: 2px solid #333;
      padding: 10px;
      max-width: 600px;
      width: 100%;
      background: white;
      color: $gray-darker;
      font-weight: 400;
      @include rounded-corners(0);
      @include placeholder {
        color: rgba($gray-darker, 0.5); 
      }
    }
    button[type=submit] {
      position: absolute;
      background: #333b48;
      border: none;
      bottom: 3px;
      color: white;
      padding: 0px;
      font-size: 19px;
      @include size(39px,39px);
      @include rtl-right(3px);
      @include rounded-corners(2px);
      &:hover {
        background: $brand-primary;
      }
    }
  }
}

/***************************************************
  Mixins Themes 
/***************************************************/
/* Mixin Normal*/
@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;// iOS <4.3 & Android <4.1
  -o-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: #{alpha(opacity=$opacity-ie)};
}

@mixin ellipsis-text($value){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $value;
  -webkit-box-orient: vertical;  
}
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}
/* Mixin Clear */
@mixin clearboxstyle(){
  background: none;
  border:none;
}

@mixin clearfloat(){
  float: none;
  width: 100%;
}

/* Mixin Border */
@mixin border-exclude-top($border-deep, $border-type, $border-color ){
  border-bottom: $border-deep $border-type $border-color;
  border-left: $border-deep $border-type $border-color;
  border-right: $border-deep $border-type $border-color;
}

@mixin border-exclude-bottom($border-deep, $border-type, $border-color ){
  border-top: $border-deep $border-type $border-color;
  border-left: $border-deep $border-type $border-color;
  border-right: $border-deep $border-type $border-color;
}

@mixin border-exclude-left($border-deep, $border-type, $border-color ){
  border-top: $border-deep $border-type $border-color;
  border-bottom: $border-deep $border-type $border-color;
  border-right: $border-deep $border-type $border-color;
}

@mixin border-exclude-right($border-deep, $border-type, $border-color ){
  border-top: $border-deep $border-type $border-color;
  border-bottom: $border-deep $border-type $border-color;
  border-left: $border-deep $border-type $border-color;
}

// Transitions

@mixin transition($transition...) {
  -webkit-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

// Transformations
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees); // IE9 only
          transform: rotate($degrees);
}
@mixin scale($scale-args...) {
  -webkit-transform: scale($scale-args);
      -ms-transform: scale($scale-args); // IE9 only
          transform: scale($scale-args);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y); // IE9 only
          transform: translate($x, $y);
}
@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}

@mixin rotateX($degrees) {
  -webkit-transform: rotateX($degrees);
      -ms-transform: rotateX($degrees); // IE9 only
          transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
  -webkit-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees); // IE9 only
          transform: rotateY($degrees);
}

/*background RGBA
============================================*/
@mixin rgba($colour, $alpha)
{
  $alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
  $ieAlphaColour: argb($alphaColour);   
  background-color: $colour; 
  background-color: $alphaColour;       
  zoom: 1; 
  background-color: transparent\9; 
}
@mixin border-rgba($colour, $alpha)
{
  $alphaColour: hsla(hue($colour), saturation($colour), lightness($colour), $alpha);
  $ieAlphaColour: argb($alphaColour);   
  border-color: $colour; 
  border-color: $alphaColour;       
  zoom: 1; 
  border-color: transparent\9;
}
@mixin background-hover {
  color: $text-color;
  background: rgba(228, 50, 40, 0.3);
}

// Background Gradient: Left to Right
@mixin bg-gradient-l2r($start-colour, $end-colour) {
    background-color: $start-colour;
    background-image: -webkit-gradient(linear, left top, right top, from($start-colour), to($end-colour));
    background-image: -webkit-linear-gradient(left, $start-colour, $end-colour);
    background-image:    -moz-linear-gradient(left, $start-colour, $end-colour);
    background-image:     -ms-linear-gradient(left, $start-colour, $end-colour);
    background-image:      -o-linear-gradient(left, $start-colour, $end-colour);
    background-image:         linear-gradient(left, $start-colour, $end-colour);
    filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}', gradientType='1');
}
/// button variant outline
@mixin button-variant-outline($color, $background, $border, $colorhover, $bghover, $borderhover ) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $colorhover;
    background-color: $bghover;
        border-color: $borderhover ;
  }
  .open & { &.dropdown-toggle {
    color: $colorhover;
    background-color: $bghover;
        border-color: $borderhover ;
  } }
  &:active,
  &.active {
    background-image: none;
  }
  .open & { &.dropdown-toggle {
    background-image: none;
  } }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background;
          border-color: $border;
    }
  }
  .badge {
    color: $background;
    background-color: $color;
  }
}


// Block
// -------------------------
@mixin block-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
  border-color: $border;

  & .#{$block-heading-selector} {
    color: $heading-text-color;
    a{
      color: $heading-text-color;
    }
    background-color: $heading-bg-color;
    border-color: $heading-border;
    + .#{$block-prefix}-collapse .#{$block-content-selector} {
      border-top-color: $border;
    }
  }
  & > .#{$block-prefix}-footer {
    + .#{$block-prefix}-collapse .#{$block-prefix}-body {
      border-bottom-color: $border;
    }
  }
}
@mixin container-layout-variant($color, $background){
  background: $background;
  color: $color;
} 

/***************************************************
  Mixins RTL Themes 
/***************************************************/

// BASIC CONVERTER (ignore these)

@mixin rtl-base-simple ($property, $direction) {
  #{$property}:$direction;
  .rtl & {
    @if $direction == $rtl-right {
      #{$property}:$rtl-left;
    }
    @else {
      #{$property}:$rtl-right;
    }
  }
}
@mixin rtl-base-inherit ($property, $direction, $value, $inherit : inherit) {
  #{$property}-#{$direction}: $value;
  .rtl & {
    @if $direction == $rtl-right {
      #{$property}-#{$rtl-left}: $value;
    }
    @else {
      #{$property}-#{$rtl-right}: $value;
    }
    #{$property}-#{$direction}: $inherit;
  }
}

@mixin rtl-base-toprightbottomleft ($property, $t, $r, $b, $l) {
  #{$property}: $t $r $b $l;
  .rtl & {
    #{$property}: $t $l $b $r;
  }
}

// BODY STYLES

@mixin rtl-direction ($forBody : true) {
  direction: ltr;
  @if $forBody {
    &.rtl {
      direction: rtl;
    }
  }
  @else {
    .rtl & {
      direction: rtl;
    }
  }
}
@mixin rtl-font-family ($ltr, $rtl, $forBody : false) {
  font-family: $ltr;
  @if $forBody {
    &.rtl, &.non-latin {
      font-family:$rtl;
    }
  }
  @else {
    .rtl &, .non-latin & {
      font-family:$rtl;
    }
  }
}

// MARGIN

@mixin rtl-margin ($t, $r, $b, $l) {
  @include rtl-base-toprightbottomleft(margin,$t, $r, $b, $l);
}
@mixin rtl-margin-left ($value) {
  @include rtl-base-inherit(margin,$rtl-left,$value);
}
@mixin rtl-margin-right ($value) {
  @include rtl-base-inherit(margin,$rtl-right,$value);
}

// PADDING

@mixin rtl-padding ($t, $r, $b, $l) {
  @include rtl-base-toprightbottomleft(padding,$t, $r, $b, $l);
}
@mixin rtl-padding-left ($value) {
  @include rtl-base-inherit(padding,$rtl-left,$value);
}
@mixin rtl-padding-right ($value) {
  @include rtl-base-inherit(padding,$rtl-right,$value);
}

// BORDER

@mixin rtl-border-width ($t,$r,$b,$l) {
  @include rtl-base-toprightbottomleft(border-width,$t,$r,$b,$l);
}
@mixin rtl-border-style ($t,$r,$b,$l) {
  @include rtl-base-toprightbottomleft(border-style,$t,$r,$b,$l);
}
@mixin rtl-border-left ($value) {
  @include rtl-base-inherit(border,$rtl-left,$value);
}
@mixin rtl-border-right ($value) {
  @include rtl-base-inherit(border,$rtl-right,$value);
}

// POSITION

@mixin rtl-left ($value) {
  #{$rtl-left}: $value;
  .rtl & {
    #{$rtl-right}: $value;
    #{$rtl-left}: auto;
  }
}
@mixin rtl-right ($value) {
  #{$rtl-right}: $value;
  .rtl & {
    #{$rtl-left}: $value;
    #{$rtl-right}: auto;
  }
}

// TEXT-ALIGN

@mixin rtl-text-align-left () {
  @include rtl-base-simple(text-align, $rtl-left);
}
@mixin rtl-text-align-right () {
  @include rtl-base-simple(text-align, $rtl-right);
}

// FLOAT

@mixin rtl-float-left () {
  @include rtl-base-simple(float, $rtl-left);
}
@mixin rtl-float-right () {
  @include rtl-base-simple(float, $rtl-right);
}

// BACKGROUND-POSITION

@mixin rtl-background-position-left ($vertical) {
  background-position:$rtl-left $vertical !important;
  .rtl & {
    background-position:$rtl-right $vertical !important;
  }
}
@mixin rtl-background-position-right ($vertical) {
  background-position:$rtl-right $vertical;
  .rtl & {
    background-position:$rtl-left $vertical;
  }
}

@mixin rtl-background-position-percent ($vertical, $horPercent) {
  background-position:$horPercent $vertical;
  .rtl & {
    background-position:100% - $horPercent $vertical;
  }
}

// TEXT-SHADOW & BOX-SHADOW

@mixin rtl-text-shadow ($x, $rest) {
  text-shadow: $x $rest;
  .rtl & {
    text-shadow: -1 * $x $rest;
  }
}
@mixin rtl-box-shadow ($x, $rest) {
  -moz-box-shadow: $x $rest;
  -webkit-box-shadow: $x $rest;
  box-shadow: $x $rest;
  .rtl & {
    -moz-box-shadow: -1 * $x $rest;
    -webkit-box-shadow: -1 * $x $rest;
    box-shadow: -1 * $x $rest;
  }
}

// BORDER-RADIUS

@mixin rtl-border-radius($tl, $tr, $br, $bl) {
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-radius: $tl $tr $br $bl;
  border-radius: $tl $tr $br $bl;
  .rtl & {
    -moz-border-radius: $tr $tl $bl $br;
    -webkit-border-radius: $tr $tl $bl $br;
    border-radius: $tr $tl $bl $br;
  }
}

@mixin rtl-border-radius-topright ($value) {
  -moz-border-top-#{$rtl-right}-radius: $value;
  -webkit-border-top-#{$rtl-right}-radius: $value;
  border-top-#{$rtl-right}-radius: $value;
  .rtl & {
    -moz-border-top-#{$rtl-left}-radius: $value;
    -webkit-border-top-#{$rtl-left}-radius: $value;
    border-top-#{$rtl-left}-radius: $value;
    -moz-border-top-#{$rtl-right}-radius: inherit;
    -webkit-border-top-#{$rtl-right}-radius: inherit;
    border-top-#{$rtl-right}-radius: inherit;
  }
}

@mixin rtl-border-radius-bottomright ($value) {
  -moz-border-bottom-#{$rtl-right}-radius: $value;
  -webkit-border-bottom-#{$rtl-right}-radius: $value;
  border-bottom-#{$rtl-right}-radius: $value;
  .rtl & {
    -moz-border-bottom-#{$rtl-left}-radius: $value;
    -webkit-border-bottom-#{$rtl-left}-radius: $value;
    border-bottom-#{$rtl-left}-radius: $value;
    -moz-border-bottom-#{$rtl-right}-radius: inherit;
    -webkit-border-bottom-#{$rtl-right}-radius: inherit;
    border-bottom-#{$rtl-right}-radius: inherit;
  }
}

@mixin rtl-border-radius-topleft ($value) {
  -moz-border-top-#{$rtl-left}-radius: $value;
  -webkit-border-top-#{$rtl-left}-radius: $value;
  border-top-#{$rtl-left}-radius: $value;
  .rtl & {
    -moz-border-top-#{$rtl-right}-radius: $value;
    -webkit-border-top-#{$rtl-right}-radius: $value;
    border-top-#{$rtl-right}-radius: $value;
    -moz-border-top-#{$rtl-left}-radius: inherit;
    -webkit-border-top-#{$rtl-left}-radius: inherit;
    border-top-#{$rtl-left}-radius: inherit;
  }
}

@mixin rtl-border-radius-bottomleft ($value) {
  -moz-border-bottom-#{$rtl-left}-radius: $value;
  -webkit-border-bottom-#{$rtl-left}-radius: $value;
  border-bottom-#{$rtl-left}-radius: $value;
  .rtl & {
    -moz-border-bottom-#{$rtl-right}-radius: $value;
    -webkit-border-bottom-#{$rtl-right}-radius: $value;
    border-bottom-#{$rtl-right}-radius: $value;
    -moz-border-bottom-#{$rtl-left}-radius: inherit;
    -webkit-border-bottom-#{$rtl-left}-radius: inherit;
    border-bottom-#{$rtl-left}-radius: inherit;
  }
}