@import "../settings/settings.colors";
@import "../settings/settings.variables";
@import "../settings/settings.horizontalSpacing";
@import "../../../assets/styles/tools/tools.all";

// Layout
$button-height: $spacing-lg;
$button-content-height: $spacing-sm;
$button-padding-side: $spacing-md;
$button-content-border-padding: 0.0625rem;
$button-icon-size: $button-content-height;
$button-icon-margin-left: 1.25rem;
$button-icon-margin-right: 0.375rem;

// Color
$button-primary-color: $cerulean;
$button-primary-hover-color: $denim;
$button-secondary-color: $empress;
$button-secondary-hover-color: $coal;
$button-error-color: $error-default;
$button-error-hover-color: $error-response;
$button-text-color: $white;
$button-disabled-color: $light-gray;
$button-disabled-text-color: $pebble;

// Link Button
$button-link-height: $spacing-md;
$button-link-primary-color: $cerulean;
$button-link-secondary-color: $night-rider;
$button-link-error-color: $button-error-hover-color;
$button-link-disabled-color: $pebble;

// Button in Forms Container
$button-margin-top: 1.125rem;
$button-margin-bottom: 1.875rem;
$button-icon-size: 1rem;

button.mat-button-base {
  @include font-button;

  min-width: 0;
  height: $button-height;
  padding: 0 $button-padding-side;
  border-radius: 0;
  margin: 0;
  color: $button-text-color;

  &:hover,
  &:focus,
  &:active {
    outline: none;
  }

  .mat-button-focus-overlay {
    background: none !important;
  }

  &:not(.mat-icon-button) .mat-button-wrapper {
    .qd-icon {
      height: auto;
      font-size: rem(18);
    }
  }

  &.mat-icon-button {
    width: 1.4375rem;
    height: 1.4375rem;
    padding-right: 0;
    padding-left: 0;

    .qd-icon {
      width: 1.25rem;
      height: 1.25rem;
      pointer-events: none;
    }
  }

  &:not(.mat-flat-button, .mat-icon-button) {
    height: $button-link-height;

    /** use mat-button-base as Link */
    padding: 0;
    border-bottom: $border-width solid transparent;
    background: transparent !important;
    color: $button-link-secondary-color !important;

    .qd-icon-svg path {
      fill: $button-link-secondary-color;
    }

    .mat-button-ripple {
      background: transparent !important;
    }

    &:hover {
      border-bottom: $border-width solid $button-link-secondary-color;
    }

    &.mat-primary {
      color: $button-link-primary-color !important;

      .qd-icon-svg path {
        fill: $button-link-primary-color;
      }

      &:hover {
        border-bottom: $border-width solid $button-link-primary-color;
      }
    }

    &.mat-warn {
      color: $button-link-error-color !important;

      .qd-icon-svg path {
        fill: $button-link-error-color;
      }

      &:hover {
        border-bottom: $border-width solid $button-link-error-color;
      }
    }

    &[disabled="true"] {
      color: $button-link-disabled-color !important;

      .qd-icon-svg path {
        fill: $button-link-disabled-color;
      }

      &:hover {
        border-bottom: $border-width solid transparent;
        color: $button-link-disabled-color !important;
      }
    }

    .qd-icon {
      margin-right: $button-icon-margin-right;
      margin-left: -0.25rem;
      transform: translateY(-(rem(2)));
    }
  }

  &.mat-flat-button {
    background: $button-secondary-color;

    &:hover {
      background: $button-secondary-hover-color;
    }

    &.mat-primary {
      background: $button-primary-color;

      &:hover {
        background: $button-primary-hover-color;
        color: $button-text-color;
      }
    }

    &.mat-warn {
      background: $button-error-color;

      &:hover {
        background: $button-error-hover-color;
        color: $button-text-color;
      }
    }

    &[disabled="true"] {
      background: $button-disabled-color;
      color: $button-disabled-text-color;

      .qd-icon-svg path {
        fill: $button-disabled-text-color;
      }

      &:hover {
        background: $button-disabled-color;
        color: $button-disabled-text-color;
      }
    }

    .qd-icon {
      margin-right: $button-icon-margin-right;
      margin-left: -0.25rem;
    }
  }

  .qd-container-type-form:not(qd-forms) &.mat-flat-button {
    margin-top: rem(18);
    margin-bottom: rem(30);
  }

  .qd-forms &.mat-flat-button {
    margin-top: $button-margin-top;
    margin-bottom: $button-margin-bottom;
  }
}

.button-grid {
  display: flex;
  flex-direction: row;
  align-items: center;

  > button.mat-button-base.mat-flat-button,
  > button.mat-button.mat-button-base,
  > qd-switch {
    margin-right: $horizontal-spacing-small;

    &:last-child {
      margin-right: 0;
    }
  }
}
