@import "../core/minxin-variables";
@import "../core/minxin-mixins";

$snackbar-border-radius: .2 * $unit !default;
$snackbar-button-offset: 4.8 * $unit !default;
$snackbar-color: $color-white !default;
$snackbar-horizontal-offset: 2.4 * $unit !default;
$snackbar-vertical-offset: 0.5 * $unit !default;

.u-message {
  position: fixed;
  //right: $snackbar-horizontal-offset;
  //right: 38px \9;
  //bottom: 0;
  //left: $snackbar-horizontal-offset;
  //left: 38px \9;
  z-index: $z-index-higher;
  display: flex;
  align-items: center;
  // padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
  // padding: 22px 38px \9;
  padding:7px 0px 7px 15px;
  margin: 0 auto;
  margin-top: $snackbar-vertical-offset;
  margin-top: 22px \9;
  color:$snackbar-color ;
  background-color: $snackbar-background-color;
  //border-radius: $snackbar-border-radius;
 // border-radius: 3px \9;
  //transition: all $animation-duration $animation-curve-default $animation-duration;
  /*overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
  word-wrap: break-word;
  break-word: break-all;
  border: 1px solid transparent;
  z-index: 99999;
  &.u-mes-bottom{
    right:$snackbar-horizontal-offset;;
    right: 38px \9;
    left: $snackbar-horizontal-offset;;
    left: 38px \9;
    bottom:10px;
  }
  &.u-mes-top{
    right: $snackbar-horizontal-offset;;
    right: 38px \9;
    left: $snackbar-horizontal-offset;;
    left: 38px \9;
    top:10px;
  }
  &.u-mes-center{
    right: $snackbar-horizontal-offset;;
    right: 38px \9;
    left: $snackbar-horizontal-offset;;
    left: 38px \9;
    bottom:50%;
    transform:translateY(50%);
  }
  &.u-mes-topleft{
    top:10px;
    left: $snackbar-horizontal-offset;;
    left: 38px \9;
  }
  &.u-mes-topright{
    top:10px;
    right:2.4rem;
    right: 38px \9;

  }
  &.u-mes-bottomleft{
    bottom: 10px;
    left: $snackbar-horizontal-offset;;
    left: 38px \9;
  }
  &.u-mes-bottomright{
    bottom:10px;
    right: $snackbar-horizontal-offset;;
    right: 38px \9;

  }    
  &.u-meserror {
    background-color: #fff6f7;
    // border: #f8aea9 1px solid;
    color: #f15a4a;
    border-color: #fff6f7;
  }
  &.u-meswarning {
    color: #ff9436;
    background-color: rgba(255,224,178,.8);
    border-color: rgba(255,224,178,.8);
  }
  &.dark.u-mesinfo {
    color: #fff;
    background-color: #00bcd4;
    border-color: #00bcd4;
    .u-msg-close{
      //display:none;
    }
  }
  &.dark.u-mesnews {
    color: #fff;
    background-color: #39b588;
    border-color: #39b588;
    .u-msg-close{
      //display:none;
    }
  }
  &.dark.u-messuccess {
    color: #fff;
    background-color: #4caf50;
    border-color: #4caf50;
    .u-msg-close{
      //display:none;
    }
  }
  &.dark.u-mesdanger {
    color: #fff;
    background-color: #ed4047;
    border-color: #ed4047;
    .u-msg-close{
      //display:none;
    }
  }
  &.dark.u-mesnews {
    color: #fff;
    background-color: #3f51b5;
    border-color: #3f51b5;
    .u-msg-close{
      //display:none;
    }
  }
  &.dark.u-meserror{
    color: #fff;
    background-color: #f44336;
    border-color: #f44336;
  }
  &.dark.u-meswarning {
    color: #fff;
    background-color: #ff9800;
    border-color: #ff9800;
  }

  &.u-mesdanger {
    color: #f44336;
    background-color: rgba(255,205,210,.8);
    border-color: #ffcdd2;
  }
  &.u-messuccess {
    color: #4caf50;
    background-color: rgba(200,230,201,.8);
    border-color: #c8e6c9;
  }
  &.u-mesinfo {
    color: #00bcd4;
    background-color: rgba(178,235,242,.8);
    border-color: #b2ebf2;
  }
  &.u-mesnews {
    color: #3f51b5;
    background-color: rgba(197,202,233,.8);
    border-color: #c5cae9;
  }
  &.accept .button {
    color: $snackbar-color-accept;
  }
  &.warning .button {
    color: $snackbar-color-warning;
  }
  &.cancel .button {
    color: $snackbar-color-cancel;
  }
 // &:not(.active) {
 //   transform: translateY(100%);
 // }
 // &.active {
 //   transform: translateY(0%);
 // }
  & .icon {
	  margin-right: $snackbar-vertical-offset;
	}

  & .label {
	  flex-grow: 1;
	  font-size: $font-size-small;
	}

  & .u-button {
	 position: absolute;
	 top: 14px;
	 right: 14px;
   cursor: pointer;
	 // color:$snackbar-color ;
	}
  & .u-msg-close{
    position: absolute;
    top: 11px;
    right: 15px;
    font-size: 12px;
    cursor: pointer;
    //color:#CECECE;
    &:hover{
      color:black;
    }
  }

  & i.fa , & i.uf{
    padding-left:0px;
  }
}