@use 'variables' as *;
@use '@syncfusion/ej2-buttons/styles/button/variables' as btn;

@include export-module('progress-button-layout') {
  .e-progress-btn {
    position: relative;

    .e-progress {
      height: $progress-btn-full-height;
      left: $progress-btn-zero-padding-margin;
      opacity: 0;
      position: absolute;
      top: $progress-btn-zero-padding-margin;
      transition: opacity .3s linear;
    }

    .e-spinner {
      transition: $progress-btn-transition;
    }

    .e-btn-content {
      display: inline-block;
      position: relative;
      z-index: 1;
    }

    &.e-vertical {
      .e-progress {
        bottom: $progress-btn-zero-padding-margin;
        height: $progress-btn-nill-height;
        top: $progress-auto-width;
        width: $progress-full-width;
      }
    }

    &.e-progress-top {
      .e-progress {
        height: $progress-btn-process-height;
      }
    }

    &.e-progress-bottom {
      .e-progress {
        bottom: $spinner-inner-top;
        height: $progress-btn-process-height;
        top: $progress-auto-width;
      }
    }

    &.e-progress-active {
      overflow: hidden;
      pointer-events: none;
     
      @if $skin-name == 'bootstrap5.3' {
        .e-progress,
        .e-primary .e-progress,
        .e-success .e-progress,
        .e-danger .e-progress {
          opacity: .3;
        }

        .e-warning .e-progress,
        .e-info .e-progress,
        .e-primary.e-outline .e-progress,
        .e-primary.e-flat .e-progress,
        .e-success.e-outline .e-progress,
        .e-success.e-flat .e-progress,
        .e-danger.e-outline .e-progress,
        .e-danger.e-flat .e-progress,
        .e-warning.e-outline .e-progress,
        .e-warning.e-flat .e-progress,
        .e-info.e-outline .e-progress,
        .e-info.e-flat .e-progress {
          opacity: .2;
        }
      }
      @else {
        .e-progress {
          opacity: 1;
        }
      }

      .e-animate-end {
        opacity: 0;
      }
    }

    &.e-spin-top,
    &.e-spin-bottom {
      transition: padding .3s linear;
    }

    &.e-progress-active:not(.e-hide-spinner) {
      &.e-spin-top,
      &.e-spin-bottom {
        .e-btn-content,
        .e-spinner {
          display: block;
          line-height: $progress-btn-line-height;
        }
      }

      &.e-spin-center {
        .e-spinner {
          display: flex;
          justify-content: center;
        }
      }

      &.e-spin-left:not(.e-round) {
        .e-spinner {
          padding-right: $progress-btn-spinner-padding;

          .e-spinner-inner {
            top: $spinner-inner-top;
          }
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding;
            padding-right: $progress-btn-zero-padding-margin;
          }
        }
      }

      &.e-spin-right:not(.e-round) {
        .e-spinner {
          padding-left: $progress-btn-spinner-padding;

          .e-spinner-inner {
            top: $spinner-inner-top;
          }
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-zero-padding-margin;
            padding-right: $progress-btn-spinner-padding;
          }
        }
      }

      &.e-spin-top {
        padding-bottom: $progress-btn-spin-btn-padding;
        padding-top: $progress-btn-spin-btn-padding;

        .e-spinner {
          padding-bottom: $progress-btn-spinner-padding;
        }
      }

      &.e-spin-bottom {
        padding-bottom: $progress-btn-spin-btn-padding;
        padding-top: $progress-btn-spin-btn-padding;

        .e-spinner {
          padding-top: $progress-btn-spinner-padding;
        }
      }

      &.e-small {
        &.e-spin-left:not(.e-round) {
          .e-spinner {
            padding-right: $progress-btn-spinner-padding-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: $progress-btn-spinner-padding-small;
              padding-right: $progress-btn-zero-padding-margin;
            }
          }
        }

        &.e-spin-right:not(.e-round) {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: $progress-btn-zero-padding-margin;
              padding-right: $progress-btn-spinner-padding-small;
            }
          }
        }

        &.e-spin-top {
          padding-bottom: $progress-btn-small-spin-btn-padding;
          padding-top: $progress-btn-small-spin-btn-padding;

          .e-spinner {
            padding-bottom: $progress-btn-spinner-padding-small;
          }
        }

        &.e-spin-bottom {
          padding-bottom: $progress-btn-small-spin-btn-padding;
          padding-top: $progress-btn-small-spin-btn-padding;

          .e-spinner {
            padding-top: $progress-btn-spinner-padding-small;
          }
        }
      }
    }

    &.e-round-corner {
      border-radius: $progress-round-border-radius;
      outline: none;
      overflow: hidden;
    }

    &.e-rtl {
      .e-progress {
        left: $progress-auto-width;
        right: $progress-btn-zero-padding-margin;
      }

      &.e-vertical {
        .e-progress {
          bottom: $progress-auto-width;
          top: $progress-btn-zero-padding-margin;
        }
      }
    }

    .e-spinner-pane {
      height: $progress-auto-height;
      position: relative;
      width: $progress-auto-width;

      .e-spinner-inner {
        left: $progress-auto-width;
        position: relative;
        top: $progress-auto-width;
        transform: none;
      }
    }

    .e-cont-animate {
      align-items: center;
      display: inline-flex;
      height: $progress-btn-full-height;
      justify-content: center;
      left: $progress-btn-zero-padding-margin;
      position: absolute;
      top: $progress-btn-zero-padding-margin;
      width: $progress-full-width;
    }

    @keyframes ProgressSlideLeft {
      from {
        left: $progress-zero-width;
        opacity: 1;
      }

      to {
        left: $progress-negative-full-width;
        opacity: 0;
      }
    }

    @keyframes ProgressSlideRight {
      from {
        left: $progress-zero-width;
        opacity: 1;
      }

      to {
        left: $progress-full-width;
        opacity: 0;
      }
    }

    @keyframes ProgressSlideUp {
      from {
        height: $progress-auto-height;
        opacity: 1;
        top: $progress-btn-zero-padding-margin;
      }

      to {
        height: $progress-auto-height;
        opacity: 0;
        top: $progress-slideup-to-top;
      }
    }

    @keyframes ProgressSlideDown {
      from {
        height: $progress-auto-height;
        opacity: 1;
        top: $progress-btn-zero-padding-margin;
      }

      to {
        height: $progress-auto-height;
        opacity: 0;
        top: $progress-slidedown-to-top;
      }
    }

    @keyframes ProgressZoomIn {
      from {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }

      to {
        opacity: 0;
        transform: translate(0, 0) scale(3);
      }
    }

    @keyframes ProgressZoomOut {
      from {
        transform: translate(0, 0) scale(1);
      }

      to {
        transform: translate(0, 0) scale(0);
      }
    }
  }
}