// Survival ✚ Kit

// Add a Bendy shadow to a squar element.
// @author Chris Eppstein
@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) {
  @include box-shadow(0 10px 5px -5px $color);
  position: relative;
  z-index: 1;
  &:before, &:after {
    @include box-shadow(0 10px 10px 1px $color);
    bottom: 2px;
    content: "";
    height: 10px;
    position: absolute;
    width: $width / 2;
    z-index: -1;
  }
  &:before {
    @include rotate(-$angle);
    left: 10px;
  }
  &:after {
    @include rotate($angle);
    right: 10px;
  }
}

// Sexy button !
@mixin shiny-button($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
  // Params
  $bg-light:   $light-color;
  $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);

  $border-inset-color: $bg-light;
  $border-inside-light: lighten($border-inset-color, 13%);
  $border-inside-dark: $border-inset-color;

  $border-outside: darken($bg-dark, 9%);
  $box-shadow:  rgba(35, 35, 35, 0.2);
  $text-shadow: darken($bg-dark, 7%);

  @extend .bradius-inner;
  @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
  @include gradient($bg-light, $bg-dark);
  @include text-shadow(2px 2px 1px $text-shadow);
  border:1px solid $border-outside;
  color:#FFF !important;

  font-size:size(13px);
  font-weight: bold;
  padding: 9px 60px;
  text-decoration: none;
  text-decoration: none !important;
  &:hover {
    @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
    @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
  }
  &:active {
    @include box-shadow(inset 0px 2px 3px $bg-dark);
    background: mix($bg-light, $bg-dark, 50%);
  }
  &.small {
    font-size: 12px;
    padding: 7px 22px;
  }
}

//
// @TODO: Add docs to shiny-button-colors!
//
@mixin shiny-button-colors($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
  // Params
  $bg-light:   $light-color;
  $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);

  $border-inset-color: $bg-light;
  $border-inside-light: lighten($border-inset-color, 13%);
  $border-inside-dark: $border-inset-color;

  $border-outside: darken($bg-dark, 9%);
  $box-shadow:  rgba(35, 35, 35, 0.2);
  $text-shadow: darken($bg-dark, 7%);


  @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
  @include gradient($bg-light, $bg-dark);
  @include text-shadow(2px 2px 1px $text-shadow);
  border:1px solid $border-outside;
  &:hover {
    @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
    @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
  }
  &:active {
    @include box-shadow(inset 0px 2px 3px $bg-dark);
    background: mix($bg-light, $bg-dark, 50%);
  }
}