@mixin focus($color, $isInset: false) {
  outline: none;
  @if $isInset {
    box-shadow: inset 0 0 0 2px rgba(red($color), green($color), blue($color), .5);
  } @else {
    box-shadow: 0 0 0 2px rgba(red($color), green($color), blue($color), .5);
  }
}

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}


@mixin input-focus($color) {
  border-color: $color;
  @include focus($color);
  z-index: 1;
}

@mixin input-style($border-color, $border-focus-color) {
  border: 1px solid $border-color;
  &:focus, &.ui-focus {
    @include input-focus($border-focus-color);
  }
  &[readonly] {
    cursor: pointer;
  }
  &[disabled], &.ui-disabled {
    background-color: $color-light;
  }
}

@mixin input-size($v, $h, $radius, $font-size) {
  padding: $v $h;
  line-height: $line-height;
  font-size: $font-size;
  border-radius: $radius;
  &.ui-disabled, &[disabled] {
    opacity: .5;
    cursor: not-allowed;
  }
}

@mixin input-addon-style($border-color, $border-focus-color) {
  border: 1px solid $border-color;
  text-align: center;
  min-width: 34px;
}

@mixin input-group-size($control-font-size, $control-x-padding, $control-y-padding, $controller-radius, $btn-radius, $btn-x-padding, $btn-y-padding, $btn-font-size) {
  font-size: $control-font-size;
  > .textbus-form-control {
    @include input-size($control-y-padding, $control-x-padding, 0, $control-font-size);
  }
  > .textbus-form-control {
    &:first-child {
      border-top-left-radius: $controller-radius;
      border-bottom-left-radius: $controller-radius;
    }

    &:last-child {
      border-top-right-radius: $controller-radius;
      border-bottom-right-radius: $controller-radius;
    }
  }
  > .textbus-btn {
    padding: $btn-y-padding $btn-x-padding;
    font-size: $btn-font-size;

    &:first-child {
      border-top-left-radius: $btn-radius;
      border-bottom-left-radius: $btn-radius;
    }

    &:last-child {
      border-top-right-radius: $btn-radius;
      border-bottom-right-radius: $btn-radius;
    }
  }
}

@mixin btn-size($name, $v, $h, $font-size, $radius) {
  .textbus-btn-#{$name} {
    padding: $v $h;
    font-size: $font-size;
    border-radius: $radius;
  }
}

@mixin btn-theme($name, $color, $bg-color) {
  .textbus-btn-#{$name} {
    color: $color;
    background-color: $bg-color;
    @if $name != default {
      border: 1px solid $bg-color;
    }

    &:hover {
      background-color: darken($bg-color, 7);
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }

    &:focus {
      background-color: darken($bg-color, 10);
      @include focus(if($name == default, $color, $bg-color));
      z-index: 1;
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }

    &:active {
      background-color: darken($bg-color, 15);
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }

    &[disabled], &[readonly] {
      opacity: .6;
      cursor: not-allowed;

      &:focus, &:hover, &:active {
        background-color: $bg-color;
      }
    }
  }
}

@mixin clearfix {
  &:before, &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}