@use 'ej2-base/styles/common/mixin' as *;
@include export-module('toast-bigger') {

  .e-bigger .e-toast-container,
  .e-toast-container.e-bigger {
    &.e-toast-top-left {
      left: $toast-position-bgr-distance;
      top: $toast-position-bgr-distance;
    }

    &.e-toast-bottom-left {
      bottom: $toast-position-bgr-distance;
      left: $toast-position-bgr-distance;
    }

    &.e-toast-top-right {
      right: $toast-position-bgr-distance;
      top: $toast-position-bgr-distance;
    }

    &.e-toast-bottom-right {
      bottom: $toast-position-bgr-distance;
      right: $toast-position-bgr-distance;
    }

    &.e-toast-bottom-center {
      bottom: $toast-position-bgr-distance;

      .e-toast {
        margin: $toast-bigger-bottom-margin;
      }
    }

    &.e-toast-top-center {
      top: $toast-position-bgr-distance;

      .e-toast {
        margin: $toast-bigger-top-margin;
      }
    }

    &.e-toast-full-width {
      left: $toast-zero-padding-margin;
      right: $toast-zero-padding-margin;

      .e-toast {
        margin: $toast-bigger-full-width-margin;
      }
    }

    &.e-rtl {
      .e-toast {
        .e-toast-message .e-toast-actions {
          text-align: left;

          > * {
            margin-left: initial;
            margin-right: $toast-action-btn-bgr-margin;
          }
        }

        .e-toast-close-icon {
          margin-left: initial;
          margin-right: $toast-auto-margin;
        }

        .e-toast-icon {
          margin-left: $toast-icon-bgr-right-margin;
          margin-right: initial;
        }

        .e-toast-progress {
          left: $toast-auto-margin;
          right: $toast-zero-padding-margin;
        }
      }
    }

    .e-toast {
      border-radius: $toast-bgr-border-radious;
      font-size: $toast-font-bgr-size;
      margin: $toast-bigger-margin;
      min-height: $toast-bgr-min-height;

      .e-toast-message {
        .e-toast-content {
          padding: $toast-content-bgr-padding;

          &:first-child {
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding-bottom: $toast-bgr-content-first-child-padding-bottom;
              padding-left: $toast-bgr-content-first-child-padding-left;
              padding-right: $toast-bgr-content-first-child-padding-right;
              padding-top: $toast-bgr-content-first-child-padding-top;
            }
            @else {
              padding: $toast-zero-padding-margin;
            }
          }

          &:last-child {
            padding-bottom: $toast-zero-padding-margin;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding-bottom: $toast-bgr-last-child-padding-bottom;
            }
          }

          + .e-toast-actions {
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding: $toast-action-btn-bgr-padding;
            }
            @else {
              padding: $toast-zero-padding-margin;
            }
          }
          @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            + .e-toast-actions {
              padding: $toast-action-btn-bgr-padding;
            }
          }
        }

        .e-toast-actions {
          padding: $toast-action-btn-bgr-padding;
          text-align: right;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-top: $toast-border solid $border;
            margin-left: $toast-bgr-actions-margin;
            margin-right: $toast-bgr-actions-margin;
          }

          > * {
            margin-left: $toast-action-btn-bgr-margin;
          }
        }
      }

      .e-toast-close-icon {
        font-size: $toast-close-icon-bgr-size;
        height: $toast-close-icon-bgr-height;
        width: $toast-close-icon-bgr-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          margin-top: $toast-bgr-close-icon-margin-top;
          position: absolute;
          right: $toast-bgr-close-icon-right;
        }
      }

      .e-toast-icon {
        font-size: $toast-icon-bgr-size;
        height: $toast-icon-bgr-height;
        margin-right: $toast-icon-bgr-right-margin;
        width: $toast-icon-bgr-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          left: $toast-zero-padding-margin;
          margin-top: $toast-bgr-toast-icon-margin-top;
          margin-left: $toast-bgr-toast-icon-margin-left;
        }
      }

      .e-toast-progress {
        height: $toast-progressbar-bgr-height;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-toast.e-placeholder-toast,
  .e-bigger.e-content-placeholder.e-toast.e-placeholder-toast {
    background-size: 400px 100px;
    min-height: $toast-bigger-min-height;
  }

  @if $skin-name == 'tailwind' {
    .e-bigger .e-toast .e-toast {
      padding: 24px;
    }

    .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-title {
      font-size: 16px;
    }
  }
}