mat-checkbox{
  &.mat-mdc-checkbox{
    display: inline-flex;
  }
  label{
    padding-left: 8px !important;
    display: inline-block;
    padding-top: 0 !important;
    height: 20px;
  }
  .mdc-checkbox__checkmark,
  .mdc-checkbox__mixedmark{
    display: none;
  }
  .mdc-checkbox{
    height: 20px;
    width: 20px;
    padding: 0 !important;
    margin: 0 !important;
    .mdc-checkbox__background{
      height: 20px;
      width: 20px;
      border-radius: var(--border-radius-data-input);
      position: relative;
      top: initial !important;
      left: initial !important;
      border: 1px solid var(--color-on-surface-neutral-primary) !important;
      transition: var(--transition-default) !important;
    }
    .mdc-checkbox__native-control{
      height: 20px !important;
      width: 20px !important;
      border: 1px solid var(--color-on-surface-neutral-primary);
    }
    .mat-mdc-checkbox-touch-target{
      display: none;
    }
  }
  &.mat-mdc-checkbox:hover{
    .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{
      background-color: var(--color-surface-neutral-hover);
      border: 1px solid var(--color-on-surface-neutral-primary);
    }
    .mdc-checkbox__background{
      background-color: var(--color-surface-neutral-hover);
      border: 1px solid var(--color-on-surface-neutral-primary);
    }
    &.mat-mdc-checkbox-checked{
      .mdc-checkbox__background{
        background-color: var(--color-surface-brand-hover) !important;
        border: 1px solid var(--color-surface-brand-hover) !important;
      }
    }
  }
  &:active{
    background-color: var(--color-surface-neutral-press);
    &.mat-mdc-checkbox-checked{
      .mdc-checkbox__background{
        background-color: var(--color-surface-brand-press);
        border: 1px solid var(--color-surface-brand-press);
      }
    }
  }
  &.mat-mdc-checkbox-checked{
    &:hover{
      .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{
        background-color: var(--color-surface-brand-hover);
        border: 1px solid var(--color-surface-brand-hover);
      }
    }
    .mdc-checkbox__background{
      background-color: var(--color-surface-brand-idle) !important;
      border: 1px solid var(--color-surface-brand-idle) !important;
    }
    .mdc-checkbox__background:before {
      color: var(--color-on-surface-alt-primary);
      content: "\e5ca";
      position: absolute;
      font-family: 'Material Symbols Rounded';
      speak: never;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  &.mat-mdc-checkbox-disabled{
    label{
      color: var(--color-on-surface-neutral-disabled) !important;
    }
    .mdc-checkbox__background{
      border: 1px solid var(--color-on-surface-neutral-disabled) !important;
    }
    .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{
      border: 1px solid var(--color-on-surface-neutral-disabled);
    }
    &.mat-mdc-checkbox-checked{
      .mdc-checkbox__background{
        border: 1px solid var(--color-on-surface-brand-disabled) !important;
        background-color: var(--color-on-surface-brand-disabled) !important;
      }
    }
  }
  &.mat-mdc-checkbox:hover .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{
    background-color: var(--color-surface-neutral-hover);
  }
  &.mat-mdc-checkbox:hover .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{
    background-color: var(--color-surface-neutral-hover);
  }
}

/* Error state */

mat-checkbox.error{
  .mdc-checkbox{
    .mdc-checkbox__background{
      border: 1px solid var(--color-on-surface-danger-primary) !important;
    }
  }
  label{
    color: var(--color-on-surface-danger-primary);
  }
  &.mat-mdc-checkbox-checked{
    .mdc-checkbox__background{
      border: 1px solid var(--color-on-surface-danger-primary) !important;
      background-color: var(--color-on-surface-danger-primary) !important;
    }
    &:hover{
      .mdc-checkbox__background{
        border: 1px solid var(--color-surface-danger-hover) !important;
        background-color: var(--color-surface-danger-hover) !important;
      }
    }
    &:active{
      .mdc-checkbox__background{
        border: 1px solid var(--color-surface-danger-press) !important;
        background-color: var(--color-surface-danger-press) !important;
      }
    }
  }
  &.mat-mdc-checkbox-disabled{
    .mdc-checkbox .mdc-checkbox__background{
      border: 1px solid var(--color-on-surface-neutral-disabled) !important;
    }
    &.mat-mdc-checkbox-checked{
      .mdc-checkbox .mdc-checkbox__background{
        border: 1px solid var(--color-surface-danger-disabled) !important;
        background-color: var(--color-surface-danger-disabled) !important;
      }
    }
  }
}

/* Intermediate state */

mat-checkbox{
  &.mat-mdc-checkbox-checked{
    &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{
      background-color: var(--color-surface-brand-idle) !important;
      &:before{
        content: "\e15b";
      }
    }
    &:hover{
      &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{
        background-color: var(--color-surface-brand-hover) !important;
      }
    }
    &:active{
      &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
        background-color: var(--color-surface-brand-press) !important;
      }
    }
  }
  &.error{
    &.mat-mdc-checkbox-checked{
      &.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{
        background-color: var(--color-surface-danger-idle) !important;
      }}
  }
}
