@import 'main';

$toast_width: 912px;
$toast_icon_size: 40px;

$modal_min_width: 342px;
$modal_min_height: 212px;
$modal_icon_size: 70px;

$closing_icon_size: 24px;

.toast-type, .modal-type {
  background-color: $color_paper;
  @include flexbox();
  @include box-shadow($box_shadow_paper_hover);
  @include border-radius();
}

.toast-type {
  width: $toast_width;
  padding: 12px 16px;

  @include align-items(center);
  @include justify-content(space-between);

  .left-icon {
    margin-right: 16px;
    font-size: $toast_icon_size;
  }

  .text {
    @include flex-grow(1);
  }

  .right-side {
    @include flexbox();
    @include align-items(center);

    & > * {
      margin-left: 16px;
    }
  }

}

.modal-type {
  min-width: $modal_min_width;
  min-height: $modal_min_height;

  .closing-icon {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  &.default-style {
    width: $modal_min_width;
    padding: 16px;
    @include flex-direction(column);
    @include align-items(stretch);
    @include justify-content(space-between);
    text-align: center;

    .top-icon {
      font-size: $modal_icon_size;
    }

    .text {
      padding: 16px 0 22px;
    }

    .bottom {
      @include flexbox();
      @include justify-content(space-between);
    }
  }
}

.closing-icon {
  font-size: $closing_icon_size;
  color: $color_grey;
  cursor: pointer;
}