@use '@angular/material' as mat;
@mixin mw-mat-checkbox-override($theme) {
  $theme-background: map-get($theme, background);
  $theme-foreground: map-get($theme, foreground);
  $accent: map-get($theme, accent);

  mat-checkbox {
    &.mw-required::before {
      content: '*';
      color: var(--orange500);
      padding-right: 4px;
      vertical-align: middle;
    }

    .mat-checkbox-frame {
      border-width: 1px;
      border-color: var(--mw-text);
    }

    .mat-checkbox-inner-container {
      margin-right: 8px;
    }
    .mat-checkbox-ripple {
      display: none;
      width: 36px;
      height: 36px;
      left: calc(50% - 18px);
      top: calc(50% - 18px);
      .mat-ripple-element {
        width: 36px !important;
        height: 36px !important;
        left: 0px !important;
        top: 0px !important;
      }
    }
    &.mat-checkbox-disabled {
      &.mat-checkbox-checked,
      &.mat-checkbox-indeterminate {
        .mat-checkbox-background {
          background-color: rgba(mat.get-color-from-palette($accent), 0.38);
        }
        .mat-checkbox-frame {
          opacity: 0;
        }
      }
    }
    &.mat-checkbox-disabled[readonly] {
      &.mat-checkbox-checked,
      &.mat-checkbox-indeterminate {
        .mat-checkbox-background {
          background-color: rgba(mat.get-color-from-palette($accent), 1);
        }
        .mat-checkbox-frame {
          opacity: 0;
        }
      }
    }
    &:not(.mat-checkbox-checked):active {
      .mat-checkbox-ripple {
        .mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
          background-color: var(--black100);
        }
      }
    }
    .mat-checkbox-label {
      @extend .mw-body2;
      color: var(--mw-text);
    }
    &.mat-checkbox-disabled .mat-checkbox-label {
      color: var(--mw-disabled-text);
    }
    &.mat-checkbox-disabled[readonly] {
      &.mat-checkbox-checked,
      &.mat-checkbox-indeterminate {
        .mat-checkbox-label {
          color: var(--mw-text);
        }
      }
    }
  }

  .mw-checkbox-group {
    mat-checkbox,
    mw-checkbox-group {
      display: block;
      &:not(:last-child) {
        margin-bottom: 4px;
      }
    }
    &__parent-checkbox ~ .mw-checkbox-group__child-item {
      margin-left: 24px;
    }
    &--horizontal {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      mat-label {
        margin-bottom: 8px;
        width: 100%;
      }
      mat-checkbox {
        margin-right: 8px;
      }
    }
  }

  .mw-checkbox-group,
  .mw-checkbox-group--horizontal {
    mat-label {
      @extend .mw-caption;
      display: block;
      margin-bottom: 4px;
      color: var(--mw-secondary-text);
    }
  }

  .ag-group-expanded,
  .ag-group-contracted {
    margin-right: 8px !important;
  }
}