@import 'main';

$snackbar_width: 912px;
$snackbar_closing_icon_size: 24px;
$snackbar_margin: 10px;

.snackbar {
  background-color: $color_secondary_dark;
  width: $snackbar_width;
  padding: 8px 56px 8px 16px;
  color: $color_paper;
  @include border-radius();
  @include box-shadow($box_shadow_secondary_hover);
  position: fixed;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  opacity: 0;

  &.active {
    opacity: 1;
  }

  .text {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    i {
      font-size: 24px !important;
      vertical-align: middle;
      color: $color_paper;
      background: none;
      margin-right: 10px;
    }
    .check {
      border-radius: 50%;
      color: $color_paper;
      background-color: $color_primary;
    }
    .close {
      border-radius: 50%;
      color: $color_paper;
      background-color: $color_error;
    }
    .help_hover {
      border-radius: 50%;
      background-color: $color_secondary;
      & span:nth-child(2) {
        color: $color_secondary;
      }
      & span:nth-child(1):before {
        color: $color_secondary;
      }
      & span:nth-child(3):before {
        color: $color_paper;
      }
    }
    .attention {
      border-radius: 50%;
      color: $color_paper;
      background-color: $color_primary;
    }
  }
  .closing-box{
    position: absolute;
    height: 100%;
    right: 16px;
    top: 0;
    bottom: 0;
    @include middle();
  }
  .closing-icon {
    font-size: $snackbar_closing_icon_size;
    color: $color_grey;
    cursor: pointer;
  }
}

.top-left, .top-right {
  top: $snackbar_margin;
}

.bottom-left, .bottom-right {
  bottom: $snackbar_margin;
}

.top-left, .bottom-left {
  left: $snackbar_margin;
}

.top-right, .bottom-right {
  right: $snackbar_margin;
}

.top-center, .bottom-center {
  right: 0;
  left: 0;
  margin: auto;
}

.top-center {
  top: $snackbar_margin;
}

.bottom-center {
  bottom: $snackbar_margin;
}