html .mdc-list{
  margin: 0;
  padding: 0;
  gap: 4px;
  display: flex;
  flex-direction: column;
  .mdc-list-item{
    height: 30px;
    padding: 0 8px;
    font-size: var(--font-size-m);
    border-radius: var(--border-radius-interface);
    &:hover{
      background-color: var(--color-surface-neutral-hover);
    }
    &:active{
      background-color: var(--color-surface-neutral-press);
    }
    .mat-mdc-list-item-unscoped-content{
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .mat-ripple-element{
      display: none !important;
    }
  }
}

.mdc-list{
  .mat-mdc-list-item{
    height: 30px !important;
    padding: 0 8px;
    font-size: var(--font-size-m);
    border-radius: var(--border-radius-interface);
    display: flex;
    flex-direction: row-reverse;
    &:hover{
      background-color: var(--color-surface-neutral-hover);
    }
    &:active{
      background-color: var(--color-surface-neutral-press);
    }
    .mdc-list-item__end{
      margin: 0 !important;
    }
  }
  .mdc-checkbox{
    height: 20px !important;
    width: 20px !important;
    padding: 0 !important;
    margin: 0 8px 0 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-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{
    background-color: var(--color-surface-brand-idle) !important;
    border: 1px solid var(--color-surface-brand-idle) !important;
  }
  .mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background:before{
    color: var(--color-on-surface-alt-primary);
    content: "\ec1e";
    position: absolute;
    font-family: 'metron-icons' !important;
    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;
  }
  .mdc-checkbox__checkmark,
  .mdc-checkbox__mixedmark{
    display: none;
  }
}

.mat-mdc-list-option .mdc-checkbox{
  width: 20px;
  height: 20px;
}

.mat-ripple-element{
  display: none !important;
}

.mat-mdc-list-option .mdc-radio{
  display: none !important;
}
.mat-mdc-list-option.selected{
  background-color: var(--color-surface-neutral-press);
  &:hover{
    background-color: var(--color-surface-neutral-hover);
  }
  &:active{
    background-color: var(--color-surface-neutral-press);
  }
}