@include export-module('progress-button-theme') {

  /*! Progress Button Theme */
  .e-progress-btn {
    .e-spinner-pane .e-spinner-inner svg {
      fill: $progress-btn-color;
      stroke: $progress-btn-color;

      .e-path-circle {
        stroke: fade-out($btn-color, $progress-btn-circle-opacity);
        @if $skin-name == 'bootstrap4' {
          stroke-width: 1px;
        }
        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          stroke-width: 3px;
        }
      }

      .e-path-arc {
        stroke: $btn-color;
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          stroke-width: 3px;
        }
      }
    }

    #{if(&, '&', '*')}.e-primary,
    #{if(&, '&', '*')}.e-primary.e-outline:hover,
    #{if(&, '&', '*')}.e-primary.e-outline:focus,
    #{if(&, '&', '*')}.e-primary.e-flat:hover,
    #{if(&, '&', '*')}.e-primary.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-primary-color;
        stroke: $btn-primary-color;

        .e-path-circle {
          stroke: fade-out($btn-primary-color, $progress-btn-circle-opacity);
        }

        .e-path-arc {
          stroke: $btn-primary-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-primary-color;
          stroke: $btn-flat-primary-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
            }
            @else {
              stroke: fade-out($btn-flat-primary-color, $progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-primary-color;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-success,
    #{if(&, '&', '*')}.e-success.e-outline:hover,
    #{if(&, '&', '*')}.e-success.e-outline:focus,
    #{if(&, '&', '*')}.e-success.e-flat:hover,
    #{if(&, '&', '*')}.e-success.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-success-color;
        stroke: $btn-success-color;

        .e-path-circle {
          stroke: fade-out($btn-success-color, $progress-btn-circle-opacity);
        }

        .e-path-arc {
          stroke: $btn-success-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-success-color;
          stroke: $btn-flat-success-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
            }
            @else {
              stroke: fade-out($btn-flat-success-color, $progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-success-color;
            }
          }
        }
      }
    }

    &.e-info,
    &.e-info.e-outline:hover,
    &.e-info.e-outline:focus,
    &.e-info.e-flat:hover,
    &.e-info.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-info-color;
        stroke: $btn-info-color;

        .e-path-circle {
          stroke: fade-out($btn-info-color, $progress-btn-circle-opacity);
        }

        .e-path-arc {
          stroke: $btn-info-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-info-color;
          stroke: $btn-flat-info-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
            }
            @else {
              stroke: fade-out($btn-flat-info-color, $progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-info-color;
            }
          }
        }
      }
    }

    &.e-warning,
    &.e-warning.e-outline:hover,
    &.e-warning.e-outline:focus,
    &.e-warning.e-flat:hover,
    &.e-warning.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-warning-color;
        stroke: $btn-warning-color;

        .e-path-circle {
          stroke: fade-out($btn-warning-color, $progress-btn-circle-opacity);
        }

        .e-path-arc {
          stroke: $btn-warning-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-warning-color;
          stroke: $btn-flat-warning-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
            }
            @else {
              stroke: fade-out($btn-flat-warning-color, $progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-warning-color;
            }
          }
        }
      }
    }

    &.e-danger,
    &.e-danger.e-outline:hover,
    &.e-danger.e-outline:focus,
    &.e-danger.e-flat:hover,
    &.e-danger.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-danger-color;
        stroke: $btn-danger-color;

        .e-path-circle {
          stroke: fade-out($btn-danger-color, $progress-btn-circle-opacity);
        }

        .e-path-arc {
          stroke: $btn-danger-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-danger-color;
          stroke: $btn-flat-danger-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' {
              stroke: fade-out($btn-flat-primary-path-arc, $progress-btn-circle-opacity);
            }
            @else {
              stroke: fade-out($btn-flat-danger-color, $progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-danger-color;
            }
          }
        }
      }
    }

    &.e-outline,
    &.e-flat {
      &.e-primary {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-primary-bgcolor;
          stroke: $btn-primary-bgcolor;

          .e-path-circle {
            stroke: fade-out($btn-primary-bgcolor, $progress-btn-circle-opacity);
          }

          .e-path-arc {
            stroke: $btn-primary-bgcolor;
          }
        }
      }

      &.e-success {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-success-bgcolor;
          stroke: $btn-success-bgcolor;

          .e-path-circle {
            stroke: fade-out($btn-success-bgcolor, $progress-btn-circle-opacity);
          }

          .e-path-arc {
            stroke: $btn-success-bgcolor;
          }
        }
      }

      &.e-info {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-info-bgcolor;
          stroke: $btn-info-bgcolor;

          .e-path-circle {
            stroke: fade-out($btn-info-bgcolor, $progress-btn-circle-opacity);
          }

          .e-path-arc {
            stroke: $btn-info-bgcolor;
          }
        }
      }

      &.e-warning {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-warning-bgcolor;
          stroke: $btn-warning-bgcolor;

          .e-path-circle {
            stroke: fade-out($btn-warning-bgcolor, $progress-btn-circle-opacity);
          }

          .e-path-arc {
            stroke: $btn-warning-bgcolor;
          }
        }
      }

      &.e-danger {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-danger-bgcolor;
          stroke: $btn-danger-bgcolor;

          .e-path-circle {
            stroke: fade-out($btn-danger-bgcolor, $progress-btn-circle-opacity);
          }

          .e-path-arc {
            stroke: $btn-danger-bgcolor;
          }
        }
      }
    }

    &.e-link {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-link-color;
        stroke: $btn-link-color;

        .e-path-circle {
          stroke: fade-out($btn-link-color, $progress-btn-circle-opacity);
        }

        .e-path-arc {
          stroke: $btn-link-color;
        }
      }
    }
  }

  .e-progress {
    background-color: $progress-btn-bgcolor-normal;
  }

  #{if(&, '&', '*')}.e-primary,
  #{if(&, '&', '*')}.e-success,
  #{if(&, '&', '*')}.e-danger,
  #{if(&, '&', '*')}.e-info {
    .e-progress {
      background-color: $progress-btn-bgcolor;
    }
  }

  #{if(&, '&', '*')}.e-warning {
    .e-progress {
      background-color: $progress-btn-warning-progress-color;
    }
  }

  #{if(&, '&', '*')}.e-flat {
    &.e-primary {
      .e-progress {
        background-color: fade-out($progress-btn-flat-primary-progress-color, .8);
      }
    }

    &.e-success {
      .e-progress {
        background-color: fade-out($progress-btn-flat-success-progress-color, .8);
      }
    }

    &.e-info {
      .e-progress {
        background-color: fade-out($progress-btn-flat-info-progress-color, .8);
      }
    }

    &.e-warning {
      .e-progress {
        background-color: fade-out($progress-btn-flat-warning-progress-color, .8);
      }
    }

    &.e-danger {
      .e-progress {
        background-color: fade-out($progress-btn-flat-danger-progress-color, .8);
      }
    }
  }

  #{if(&, '&', '*')}.e-outline:not(:focus) {
    &.e-primary {
      .e-progress {
        background-color: fade-out($btn-primary-bgcolor, .8);
      }
    }

    &.e-success {
      .e-progress {
        background-color: fade-out($btn-success-bgcolor, .8);
      }
    }

    &.e-info {
      .e-progress {
        background-color: fade-out($btn-info-bgcolor, .8);
      }
    }

    &.e-warning {
      .e-progress {
        background-color: fade-out($btn-warning-bgcolor, .8);
      }
    }

    &.e-danger {
      .e-progress {
        background-color: fade-out($btn-danger-bgcolor, .8);
      }
    }
  }

  #{if(&, '&', '*')}.e-flat:not(:focus) {
    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      &.e-primary {
        .e-progress {
          background-color: fade-out($btn-primary-bgcolor, .8);
        }
      }

      &.e-success {
        .e-progress {
          background-color: fade-out($btn-success-bgcolor, .8);
        }
      }

      &.e-info {
        .e-progress {
          background-color: fade-out($btn-info-bgcolor, .8);
        }
      }

      &.e-warning {
        .e-progress {
          background-color: fade-out($btn-warning-bgcolor, .8);
        }
      }

      &.e-danger {
        .e-progress {
          background-color: fade-out($btn-danger-bgcolor, .8);
        }
      }
    }
  }
}