@use '../mixins';

.contact-list-item {
  display: flex;
  --contact-padding-start: 20px;

  &:hover {
    background-color: var(--contactListItemBgHover);
  }

  &:focus-within {
    background-color: var(--contactListItemBgFocus);
  }

  .chat-list & {
    --contact-padding-start: 0px;
    padding-inline-start: 0px;
  }

  .contact-list-item-button {
    @include mixins.button-reset;
    padding-inline-start: var(--contact-padding-start);
    flex-grow: 1;

    &:disabled,
    &[aria-disabled='true'] {
      cursor: default;
    }
  }

  button.btn-remove {
    appearance: none;
    background: none;
    border: none;
    margin-inline-end: 10px;
  }
}

.delta-checkbox {
  margin-inline-end: 10px;
  input {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-top: calc((64px - 20px) / 2);
    border: solid;
    border-radius: 3px;
    border-width: 2px;
    border-color: grey;
    cursor: pointer;
    &:checked {
      border-color: var(--loginInputFocusColor);
      background-color: var(--loginInputFocusColor);
    }
    &:disabled {
      border-color: grey;
      background-color: grey;
      cursor: default;
    }
  }
  .checkmark {
    display: block;
    position: relative;
    top: -20px;
    width: 20px;
    height: 20px;
    span {
      display: block;
      position: relative;
      background-color: white;
    }
    span:nth-child(1) {
      width: 9px;
      height: 3px;
      right: -1px;
      bottom: -7px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    span:nth-child(2) {
      height: 3px;
      width: 14px;
      top: 1px;
      right: -6px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
}

.disabled > .delta-checkbox > input {
  border-color: var(--delta-dialog-separator-text);
  background-color: var(--delta-dialog-separator-text);
}
