$snackbar-text-color: white !default;
$snackbar-background-color: $grey-900 !default;
$snackbar-action-color: $accent-1-color !default;

$lui-snackbar-action-default-color: $grey-400;
$lui-snackbar-action-hover-default-color: $grey-100;
$lui-snackbar-action-hover-default-background-color: rgba($grey-100, 0.3);
$lui-snackbar-action-left-default-border-color: $grey-500;

$lui-snackbar-action-primary-color: $primary-1-color;
$lui-snackbar-action-hover-primary-color: $white;
$lui-snackbar-action-hover-primary-background-color: rgba($primary-1-color, 1);
$lui-snackbar-action-left-primary-border-color: $primary-1-color;

$lui-snackbar-action-success-color: $success;
$lui-snackbar-action-hover-success-color: $success-inverse;
$lui-snackbar-action-hover-success-background-color: rgba($success, 1);
$lui-snackbar-action-left-success-border-color: $success;

$lui-snackbar-action-error-color: $error;
$lui-snackbar-action-hover-error-color: $error-inverse;
$lui-snackbar-action-hover-error-background-color: rgba($error, 1);
$lui-snackbar-action-left-error-border-color: $error;

.lui-snackbar {

  color: $snackbar-text-color;
  background-color: $snackbar-background-color;
  border-radius: 2px;
  padding: 0 $desktop-gutter;
  height: auto;
  line-height: 25px;
  min-width: 288px;
  min-height: 48px;
  border-left: 10px solid $lui-snackbar-action-left-default-border-color;

  position: fixed;
  z-index: 99999999;
  bottom: $desktop-gutter;
  left: $desktop-gutter;

  padding-right: 110px;
  padding-top: 11px;
  padding-bottom: 11px;

  @include ease-out();
  opacity: 0;
  visibility:hidden;
  @include transform(translate3d(0, 8px, 0));

  .lui-snackbar-action {
    color: $lui-snackbar-action-default-color;
    margin-left: $desktop-gutter;
    background-color: transparent;
    position: absolute;
    bottom: calc(50% - 18px);
    right: 10px;

    &:hover{
      color: $lui-snackbar-action-hover-default-color;
      background-color: $lui-snackbar-action-hover-default-background-color;
    }
  }

  &.lui-is-rounded{
    border-radius: 3px;
  }

  &.lui-is-primary{
    border-left: 10px solid $lui-snackbar-action-primary-color;

    .lui-snackbar-action{
      color: $lui-snackbar-action-primary-color;

      &:hover{
        color: $lui-snackbar-action-hover-primary-color;
        background: $lui-snackbar-action-hover-primary-background-color;
      }
    }
  }

  &.lui-is-success{
    border-left: 10px solid $lui-snackbar-action-success-color;

    .lui-snackbar-action{
      color: $lui-snackbar-action-success-color;

      &:hover{
        color: $lui-snackbar-action-hover-success-color;
        background: $lui-snackbar-action-hover-success-background-color;
      }
    }
  }

  &.lui-is-error{
    border-left: 10px solid $lui-snackbar-action-error-color;

    .lui-snackbar-action{
      color: $lui-snackbar-action-error-color;

      &:hover{
        color: $lui-snackbar-action-hover-error-color;
        background: $lui-snackbar-action-hover-error-background-color;
      }
    }
  }

  &.lui-is-open {
    display:block;
    opacity: 1;
    visibility: visible;
    @include transform(translate3d(0, 0, 0));
  }

}