@import '../../../styles/abstracts/index';

//
// Checklist Item
//

.c-checklist-item {
  display: flex;
  cursor: pointer;

  &:not(:last-child) {
    margin-bottom: gap(medium);
  }

  &:focus {
    outline: none;
  }

  &[data-focus-visible-added] {
    > .c-checklist-item__checkbox {
      outline: px-to-rem(2px) dotted;
      outline-offset: px-to-rem(2px);
    }
  }

  &[aria-checked='true'] {
    --c-checklist-item-text-decoration: line-through;

    > .c-checklist-item__checkbox {
      background-color: $color-brand;
      border-color: $color-brand;
    }
  }

  &__checkbox {
    display: inline-flex;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid $g-text-color-light;
    margin-top: px-to-rem(2px);
    margin-right: gap(small);
    border-radius: 50%;
    color: $g-text-color-light;
    font-size: $g-font-size-xlarge;
  }

  &__title {
    @include heading-styles();
    @include text-style('subtitle');

    text-decoration: var(--c-checklist-item-text-decoration);
  }

  &__description {
    @include text-style('large-body');

    margin-top: gap(xsmall);
    text-decoration: var(--c-checklist-item-text-decoration);
  }
}
