// Import theming functions
// @import "@angular/material/theming";
// Import your custom theme
@import "./material-theme.scss";

@import "./material-variables.scss";

@import "./partials/logo.scss";
@import "./partials/mat-toolbar.scss";
@import "./partials/side-navbar.scss";
@import "./partials/footer.scss";
@import "./partials/highlights.scss";

// This is required, since there's a bug in Angular Material
// that prevents the foreground color from being correctly
// detected as white instead of black for some colors, e.g.
// Cyan 600
// See here for more information:
// https://github.com/angular/components/issues/26056
.mat-primary:not(.mat-unthemed) {
  .mdc-button__label,
  &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
    color: #fff;
  }
}

.mat-primary .mat-unthemed:not(:disabled){
  .mdc-button__label,
  &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
    color: black;
  }
}

.mat-primary .mat-unthemed:disabled{
  .mdc-button__label,
  &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
    color: rgba(0, 0, 0, .38);;
  }
}

.mat-primary:not(.mdc-icon-button) {
  .mdc-button__label,
  > .mat-icon,
  &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
    color: #fff;
  }
}

.mat-mdc-form-field:not([appearance]) .mat-mdc-text-field-wrapper {
  background: transparent;
}

div.mdc-form-field {
  .mdc-checkbox {
    padding: 0;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;

    .mdc-checkbox__native-control {
      width: 100%;
      height: 100%;

      &:focus ~ .mdc-checkbox__ripple {
        opacity: 0 !important;
      }
    }

    .mdc-checkbox__background {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  > label {
    line-height: 24px;
    padding-left: 8px;
  }
}