@mixin task-list() {
  $task-list: settings($settings, "define.task-list.class");

  #{$task-list} {
    display: flex;
    flex-direction: column;

    &__item {
      display: block;
      & + & {
        margin-top: 1em;
      }
    }

    &__label {
      padding: 1em;
      border-radius: value(border-radius);
      background-color: value(background-accent);
      padding-left: 2.5em;
      position: relative;
      display: block;
    }
    &__input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      &:checked + #{$task-list}__label {
        &::after {
          transform: translateY(-50%) scale(0.5);
        }
      }
    }
    &__label {
      &::before,
      &::after {
        content: "";
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        left: 0.5em;
        top: 50%;
        display: block;
        transform: translateY(-50%);
        border-radius: 50%;
        transition: transform value(transition);
      }
      &::before {
        box-shadow: 0 0 0 2px value(foreground);
      }
      &::after {
        background-color: value(primary);
        transform: translateY(-50%) scale(0);
      }
    }
    &__link {
      position: relative;
      z-index: 2;
    }
  }
}