:host {
  button {
    outline: none;

    // default to text-button container-height; per-variant overrides below read the matching mat token.
    // FABs keep mat-fab's fixed container size.
    &:not(.mat-mdc-fab-base) {
      min-height: var(--mat-button-text-container-height);
      height: unset; // allow height to expand
    }

    &.mat-mdc-unelevated-button {
      min-height: var(--mat-button-filled-container-height);
    }

    &.mat-mdc-raised-button {
      min-height: var(--mat-button-protected-container-height);
    }

    &.mat-mdc-outlined-button {
      min-height: var(--mat-button-outlined-container-height);
    }

    &.mat-mdc-tonal-button {
      min-height: var(--mat-button-tonal-container-height);
    }

    &.working {
      cursor: not-allowed;
    }

    ::ng-deep .mdc-button__label {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    // icon only
    &.mat-mdc-button.mat-mdc-icon-button {
      // icon button fixes
      min-width: unset;
      width: var(--mat-icon-button-state-layer-size, 40px);
      height: var(--mat-icon-button-state-layer-size, 40px);
      padding: 0;
      --mat-icon-button-icon-size: unset;
      --mat-text-button-with-icon-horizontal-padding: 0px;
      --mat-icon-button-state-layer-size: 40px;
      border-radius: 50%; // sometimes the css order seems to be different, causing the button to lose its radius

      // disabled styling for icon buttons; required because the button uses mat-button directive
      // instead of mat-icon-button, so Material's icon button disabled tokens aren't applied automatically
      &:disabled,
      &.disabled {
        color: var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent));
      }

      .mat-mdc-progress-spinner {
        // fix spinner size. Without this set the spinner will be off-center
        // Angular Material pulls from this value for setting the spinner size when used in a button
        --mat-icon-button-icon-size: 40px;
      }
    }

    // fab icon
    &.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab {
      height: 48px;
      --mat-icon-button-state-layer-size: 48px;

      // fix fab icon size
      .mat-mdc-progress-spinner {
        --mat-icon-button-icon-size: 48px;
      }
    }

    // Material FAB (`fab` without `iconOnly`) / extended FAB (with text)
    &.mat-mdc-fab-base {
      // align by the FAB's middle instead of its content's baseline, so icon and text-only FABs line up inline
      vertical-align: middle;

      // the FAB icon is replaced by the spinner while working
      mat-icon.mat-fab-icon {
        transition: opacity 0.3s ease-in-out;

        &.working {
          opacity: 0;
        }
      }

      // extended FAB leading icon matches mat-fab's 24px icon and 12px icon-label gap
      mat-icon.mat-button-icon {
        font-size: 1.5rem;
        height: 1.5rem;
        width: 1.5rem;
        padding-right: 0;
        margin-right: 12px;

        &.is-mat-icon {
          left: 0;
        }
      }
    }

    &.fullWidth {
      width: 100%;
    }

    .mat-mdc-progress-spinner {
      position: absolute;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;

      &.working {
        opacity: 1;
      }
    }

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

    mat-icon.mat-button-icon {
      padding-right: 5px;
      transition: opacity 0.3s ease-in-out;

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

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

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

      &.working {
        opacity: 0;
      }
    }

    // echo overlay icon — mirrors the spinner: absolutely positioned, centered in 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;
    }
  }
}