@use "../common-material/button";
@use '../utils';
//@include button.btn-spacing();

.wds-btn-primary {
  @include button.wds-btn-primary;
}

.wds-btn-secondary {
  @include button.wds-btn-secondary;
}

.wds-btn-ghost {
  @include button.wds-btn-ghost;
}

.wds-btn-white {
  @include button.wds-btn-white;
}

.wds-btn-text-only {
  @include button.wds-btn-text-only;
}

.wds-icon-only-btn {
  @include button.wds-icon-only-btn;
}

.wds-icon-only-btn-primary {
  @include button.wds-icon-only-btn--primary;

  .mat-icon {
    color: white;
  }
}

.wds-icon-only-btn-secondary {
  @include button.wds-icon-only-btn--secondary;

  .mat-icon {
    color: white;
  }
}

.wds-icon-only-btn-ghost {
  @include button.wds-icon-only-btn--ghost;

  .mat-icon {
    color: #cc0000;
  }

}

.wds-icon-only-btn-white {
  @include button.wds-icon-only-btn--white;
}


.wds-floating-btn-primary {
  @include button.wds-btn-primary;
  padding: 10px 12px;

  .mat-icon {
    padding-right: 0;
  }
}

.wds-floating-btn-secondary {
  @include button.wds-btn-secondary;
  padding: 10px 12px;

  .mat-icon {
    padding-right: 0;
  }
}

.wds-floating-btn-ghost {
  @include button.wds-btn-ghost;
  padding: 10px 12px;

  .mat-icon {
    padding-right: 0;
  }
}


.wds-floating-btn-white {
  @include button.wds-btn-white;
  padding: 10px 12px;

  .mat-icon {
    padding-right: 0;
  }
}



// Base Button
.mat-button-base {
  @include button.btn-base($box-shadow: none);
}

.mat-button-ripple {
  display: none;
}

// Red Button
.mat-primary {
  &.mat-raised-button.mat-button-base {
    @include button.wds-btn-primary;
  }
}

// Black Button
.mat-accent.mat-raised-button {
  @include button.wds-btn-secondary;

  &.cdk-keyboard-focused, &.cdk-focused {
    .mat-button-focus-overlay {
      display: none;
    }
  }
}

// Ghost Button
.mat-primary.mat-stroked-button {
  @include button.wds-btn-ghost;

  &.cdk-keyboard-focused, &.cdk-focused {
    .mat-button-focus-overlay {
      display: none;
    }
  }
}

// White Button
.mat-primary.mat-button-base {
  &:not(.mat-stroked-button, .mat-raised-button) {
    @include button.wds-btn-white;

    &.cdk-keyboard-focused, &.cdk-focused {
      .mat-button-focus-overlay {
        display: none;
      }
    }
  }
}

// Text Only button
.mat-flat-button {
  &:not(.mat-stroked-button, .mat-raised-button) {
    @include button.wds-btn-text-only;

    &.cdk-keyboard-focused, &.cdk-focused {
      .mat-button-focus-overlay {
        display: none;
      }
    }
  }
}


// Icon Only button
.mat-icon-button {

  &:not(.mat-stroked-button, .mat-raised-button) {
    @include button.wds-icon-only-btn($button-size: utils.rem-calc(36px));

    &.mat-calendar-previous-button {
      height: utils.rem-calc(44px);
    }
    &.mat-calendar-next-button {
      height: utils.rem-calc(44px);
    }

    &.cdk-keyboard-focused, &.cdk-focused {
      .mat-button-focus-overlay {
        display: none;
      }
    }
  }
}

// Floating Action Button
.mat-fab.mat-button-base {
  .mat-icon {
    padding-right: 0;
    color: white;
  }
}
// Calendar Close Button
.mat-primary {
  &.mat-mdc-raised-button {
    @include button.wds-btn-primary;
  }
}


// TODO Revisit
wds-popover-button.wds-btn-primary {
  all: unset!important;

  &:hover {
    all: unset !important;
  }
}