@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-list-view-checklist-item {
  display: block;
  width: 100%;
  cursor: pointer;
  word-wrap: break-word;

  &:last-child {
    border-bottom-width: 0;
  }

  ::ng-deep sky-checkbox {
    display: block;
    position: relative;
    width: 100%;
    padding: $sky-padding;
    cursor: pointer;
    @include mixins.sky-border(row, bottom);
  }

  ::ng-deep sky-checkbox-label {
    div {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  ::ng-deep .sky-list-view-checklist-single-button {
    background-color: transparent;
    border: none;
    @include mixins.sky-border(row, bottom);
    display: block;
    text-align: left;
    margin-bottom: 0;
    padding: $sky-padding;
    width: 100%;
    cursor: pointer;
  }
  ::ng-deep
    .sky-list-view-checklist-single-button.sky-list-view-checklist-row-selected {
    background-color: $sky-background-color-selected;
  }
}
