$bar-button-progress-bar-height-default: 5px;

:host {
  > button.dbx-progress-bar-button.mdc-button.mat-mdc-button {
    overflow: hidden; // clip progress bar to rounded corners

    // normalize icon offset to match spinner button
    --mat-button-text-icon-offset: 0px;
    --mat-button-outlined-icon-offset: 0px;
    --mat-button-protected-icon-offset: 0px;
    --mat-button-filled-icon-offset: 0px;
    --mat-button-tonal-icon-offset: 0px;

    &.working {
      cursor: not-allowed;
    }
    &.fullWidth {
      width: 100%;
    }

    // ::ng-deep required for Material's internal .mdc-button__label element
    > ::ng-deep .mdc-button__label {
      position: unset; // required so the bar can expand fully
      display: flex;
      align-items: center;

      .bar {
        position: absolute;
        top: 0;
        left: 0;
        --mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, #{$bar-button-progress-bar-height-default});
        --mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, #{$bar-button-progress-bar-height-default});
      }
    }

    // icon and text styles — outside ::ng-deep for proper view encapsulation
    mat-icon.mat-button-icon {
      padding-right: 5px;

      font-size: 1.125rem;
      height: 1.125rem;
      width: 1.125rem;

      margin-right: var(--mat-button-protected-icon-spacing, 8px);

      &.is-mat-icon {
        position: relative;
      }

      &.working {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
      }

      &.dbx-icon-no-text {
        padding-right: 0;
        margin-right: 0;
        font-size: var(--mat-icon-button-icon-size, 24px);
        height: var(--mat-icon-button-icon-size, 24px);
        width: var(--mat-icon-button-icon-size, 24px);
      }
    }

    span {
      transition: opacity 0.3s ease-in-out;

      &.working {
        opacity: 0;
      }
    }

    // echo overlay icon — centered within the button
    .echo-overlay-icon {
      position: absolute;
      inset: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
    }
  }
}