@use '../../utils/colors/colors' as colors;
@use '../../utils/mixins/mixins' as mixins;

/* -- Global rewrites for all types of mat buttons -- */
.nfr-button.mdc-button {
  .mat-mdc-button-touch-target {
    height: inherit;
  }

  .mdc-button__label {
    color: colors.$nfr-primary-color;
  }
}


/* -- Classic Mat button styles rewrite -- */
.nfr-button.mdc-button.mat-mdc-button {
  padding: 0;
  height: 22px;

  .mdc-button__label {
    @include mixins.font(400, 14px, 20px);
  }

  /* -- Substyles for disabled state -- */
  &:disabled {
    .mdc-button__label {
      color: colors.$nfr-greyed-out-color;
    }
  }

}


/* -- Stroked Mat button styles rewrite -- */
.nfr-button.mdc-button.mat-mdc-outlined-button {
  padding: 14px 38px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid colors.$nfr-primary-color;

  .mdc-button__label {
    @include mixins.font(600, 14px, 20px);
  }

  /* -- Substyles for disabled state -- */
  &:disabled {
    border: 1px solid colors.$nfr-greyed-out-color;
    .mdc-button__label {
      color: colors.$nfr-greyed-out-color;
    }
  }
}


/* -- Icon Mat button styles rewrite -- */
.nfr-button.mdc-icon-button.mat-mdc-icon-button {
  @include mixins.column(center);
  justify-content: center;
  padding: 0;
  width: 30px;
  height: 30px;


  .mat-icon svg {
    @include mixins.column(center);
    justify-content: center;
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }

  mat-icon {
    width: 18px;
    height: 18px;
  }

  .mat-mdc-button-persistent-ripple {
    @include mixins.hide-if-empty();
  }

  .mat-mdc-button-touch-target {
    height: inherit;
    width: inherit;
    border-radius: 50px;
  }

  &.nfr-icon-button-bg-grey {
    background: colors.$nfr-button-background;
  }

  &.nfr-icon-button-bg-dark-grey {
    background: colors.$nfr-icon-button-background;
  }

  &.nfr-icon-button-bg-white {
    background: colors.$nfr-primary-white-color;
  }

  /* -- Substyles for disabled state -- */
  &:disabled {
    .mat-icon svg path {
      fill: colors.$nfr-greyed-out-color;
    }
  }
}


/* -- Flat Mat button styles rewrite -- */
.mdc-button.mat-mdc-unelevated-button:not(:disabled) {
  padding: 14px 38px;
  height: 50px;
  border-radius: 50px;
  background-color: colors.$nfr-flat-button-background;

  .mdc-button__label {
    @include mixins.font(600, 14px, 20px);
    color: colors.$nfr-primary-white-color;
  }
}

/* -- Transparent button styles -- */
.nfr-button.mdc-icon-button.mat-mdc-icon-button.nfr-icon-transparent-button {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid colors.$nfr-primary-color;

  .mat-icon svg {
    @include mixins.column(center);
    justify-content: center;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    color: colors.$nfr-primary-color;

    path {
      fill: colors.$nfr-primary-color;
    }
  }

  mat-icon {
    width: 18px;
    height: 18px;
  }

  /* -- Substyles for disabled state -- */
  &:disabled {

    border: 1px solid colors.$nfr-greyed-out-color;

    .mat-icon svg path {
      fill: colors.$nfr-greyed-out-color;
    }
  }
}