@use 'colors';

.form-row {
  display: flex;
  flex-direction: row;
  mat-form-field + mat-form-field {
    margin-left: 30px;
  }

  button.mat-mdc-outlined-button:disabled {
    opacity: 0.5;
  }

  &.align-right {
    align-items: flex-end;
  }
  &.align-center {
    align-items: center;
  }

  &.space-around {
    justify-content: space-around;
  }
}

.controls {
  .mat-mdc-form-field {
    .light & {
      --mdc-filled-text-field-active-indicator-color: color(light) !important;
    }
    .dark & {
      --mdc-filled-text-field-active-indicator-color: color(dark) !important;
    }
  }
}

// form field outline colors
.view-page {
  .mdc-text-field--outlined:hover {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      border-width: 2px;
    }
  }

  // default form field outline color
  .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
      .mdc-text-field--invalid
    ) {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      .light & {
        border-color: black;
      }
      .dark & {
        border-color: white;
      }
    }
    .mat-mdc-floating-label {
      .light & {
        color: black;
      }
      .dark & {
        color: white;
      }
    }
  }

  // focused field outline
  .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
      .mdc-text-field--invalid
    ).mdc-text-field--focused {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      border-color: colors.color(primary);
    }
    .mat-mdc-floating-label {
      color: colors.color(primary);
    }
  }

  // disabled form field style
  .mdc-text-field--outlined.mdc-text-field--disabled {
    .mdc-notched-outline__leading,
    .mdc-notched-outline__notch,
    .mdc-notched-outline__trailing {
      .light & {
        border-color: colors.on-color-deemphasis(dark);
      }
      .dark & {
        border-color: colors.on-color-deemphasis(light);
      }
    }
    .mat-mdc-floating-label {
      .light & {
        color: colors.on-color-deemphasis(dark);
      }
      .dark & {
        color: colors.on-color-deemphasis(light);
      }
    }
  }
}

.button-group {
  // left border removed
  .mat-mdc-button:not(:first-child),
  .mat-mdc-raised-button:not(:first-child),
  .mat-mdc-outlined-button:not(:first-child),
  .mat-mdc-unelevated-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0px;
  }
  // right border radius removed
  .mat-mdc-button:not(:last-child),
  .mat-mdc-raised-button:not(:last-child),
  .mat-mdc-outlined-button:not(:last-child),
  .mat-mdc-unelevated-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.mat-mdc-form-field-error {
  color: colors.color(error) !important;
}
.mat-mdc-form-field {
  &.mat-form-field-invalid,
  &.ng-invalid {
    color: colors.color(error);
    .mat-mdc-floating-label,
    .mat-input-element,
    .mat-form-field-outline,
    .mat-form-field-outline-thick,
    .mat-form-field-required-marker {
      color: colors.color(error) !important;
    }
  }
  &.mat-warn .mat-mdc-input-element {
    color: colors.color(error) !important;
  }
}
