@import "vue-toastification/src/scss/_variables";
@import "vue-toastification/src/scss/_toastContainer";
@import "vue-toastification/src/scss/_toast";
@import "vue-toastification/src/scss/_closeButton";
@import "vue-toastification/src/scss/_progressBar";
@import "vue-toastification/src/scss/_icon";
@import "vue-toastification/src/scss/animations/_fade";

// $vt-namespace: "Vue-toastification" !global;
// $vt-toast-min-width: 326px;
// $vt-toast-max-width: 600px;
// $vt-toast-background: #ffffff;

// $vt-toast-min-height: 64px;
// $vt-toast-max-height: 800px;

$vt-color-default: var(--lj-color-geek-blue-6);
$vt-color-info: var(--lj-color-golden-purple-6);
$vt-color-success: var(--lj-color-polar-green-8);
$vt-color-warning: var(--lj-color-calendula-gold-6);
$vt-color-error: var(--lj-color-dust-red-6);

// $vt-color-progress-default: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);

// $vt-mobile: "only screen and (max-width : 600px)";
// $vt-not-mobile: "only screen and (min-width : 600px)";
// $vt-font-family: "Lato", Helvetica, "Roboto", Arial, sans-serif;
// $vt-z-index: 9999;

.#{$vt-namespace}__toast-component-body {
  display: flex;
}
.longjoe-toast.#{$vt-namespace}__toast {
  max-height: 96vh;

  &--default {
    background-color: var(--lj-color-gray-1);
    color: var(--lj-color-text-title);

    .el-icon {
      color: $vt-color-default;
    }
    .#{$vt-namespace}__progress-bar {
      background-color: var(--lj-color-geek-blue-2);
    }
  }
  &--info {
    background-color: var(--lj-color-gray-1);
    color: var(--lj-color-text-title);

    .el-icon {
      color: $vt-color-info;
    }
    .#{$vt-namespace}__progress-bar {
      background-color: var(--lj-color-golden-purple-2);
    }
  }
  &--success {
    background-color: var(--lj-color-gray-1);
    color: var(--lj-color-text-title);

    .el-icon {
      color: $vt-color-success;
    }
    .#{$vt-namespace}__progress-bar {
      background-color: var(--lj-color-polar-green-2);
    }
  }
  &--error {
    background-color: var(--lj-color-gray-1);
    color: var(--lj-color-text-title);

    .el-icon {
      color: $vt-color-error;
    }

    .#{$vt-namespace}__progress-bar {
      background-color: var(--lj-color-dust-red-2);
    }
  }
  &--warning {
    background-color: var(--lj-color-gray-1);
    color: var(--lj-color-text-title);

    .el-icon {
      color: $vt-color-warning;
    }
    .#{$vt-namespace}__progress-bar {
      background-color: var(--lj-color-calendula-gold-3);
    }
  }

  .toast-message {
    position: relative;
    word-break: break-word;
    overflow: auto;
    // transition: var(--el-transition-duration-fast);
    // transition: var(--el-transition-duration-fast);
    transition: all 0.3s ease-in-out;

    // &.is-expand {
    //   //   text-overflow: -o-ellipsis-lastline;
    //   //   overflow: hidden;
    //   //   text-overflow: ellipsis;
    //   //   display: -webkit-box;
    //   //   -webkit-line-clamp: 3;
    //   //   line-clamp: 3;
    //   //   -webkit-box-orient: vertical;
    // }
    &:not(.is-expand) {
      white-space: pre-wrap;
    }
  }

  .close-btn {
    position: absolute;
    top: 18px;
    right: 15px;
    z-index: 10;
  }
}
