/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-toast-theme() {
  el-toast {
    background-color: el-theme(toastr-background-color);
    border-color: el-theme(toastr-border-color);
    border-style: el-theme(toastr-border-style);
    border-width: el-theme(toastr-border-width);
    border-radius: el-theme(toastr-border-radius);
    padding: el-theme(toastr-padding);
    box-shadow: el-theme(toastr-shadow);

    color: el-theme(toastr-text-color);

    &.destroy-by-click:hover {
      background: el-theme(toastr-destroyable-hover-background-color);
      border-color: el-theme(toastr-destroyable-hover-border-color);
    }

    .title {
      font-family: el-theme(toastr-title-text-font-family);
      font-size: el-theme(toastr-title-text-font-size);
      font-weight: el-theme(toastr-title-text-font-weight);
      line-height: el-theme(toastr-title-text-line-height);
    }

    .message {
      font-family: el-theme(toastr-text-font-family);
      font-size: el-theme(toastr-text-font-size);
      font-weight: el-theme(toastr-text-font-weight);
      line-height: el-theme(toastr-text-line-height);
    }

    .icon-container {
      @include el-ltr(margin-right, 1.25rem);
      @include el-rtl(margin-left, 1.25rem);
      border-radius: el-theme(toastr-border-radius);
      min-width: 2.5rem;
      min-height: 2.5rem;
      display: flex;
      justify-content: center;
      align-items: center;

      el-icon {
        font-size: 1.5rem;
      }
    }
  }

  @each $status in el-get-statuses() {
    el-toast.status-#{$status} {
      background: el-theme(toastr-#{$status}-background-color);
      border-color: el-theme(toastr-#{$status}-border-color);
      color: el-theme(toastr-#{$status}-text-color);

      .title {
        color: el-theme(toastr-#{$status}-text-color);
      }

      &.destroy-by-click:hover {
        background: el-theme(toastr-destroyable-hover-#{$status}-background-color);
        border-color: el-theme(toastr-destroyable-hover-#{$status}-border-color);
      }

      .icon-container {
        background: el-theme(toastr-icon-#{$status}-background-color);
        color: el-theme(toastr-icon-#{$status}-color);
      }
    }
  }
}