// ============================================================================
// :: Checklist
// ============================================================================
/**
 * A list of requirements. Each of them can be checked or not.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-checklist {
  padding: 2rem;

  border-radius: $border-radius-base;
  background-color: $primary-color-3x-light;
}

// ============================================================================
// :: Elements
// ============================================================================

.m-checklist__title {
  color: $ui-info;
}

.m-checklist__list {
  padding: 0;

  list-style: none;
}

.m-checklist__item {
  @extend %__icon-checkmark-thick;

  margin: 0.5rem 0;

  color: $text-color-medium;

  // styling the icon
  &::before {
    padding: 0.1rem;
    margin-right: 1rem;

    color: $text-color-2x-light;
    font-size: $icon-size-2x-small;

    border: $border-width-1x-large solid $border-color-base;
    border-radius: $border-radius-round;
  }
}

// ============================================================================
// :: States
// ============================================================================

.m-checklist__item.is-checked {
  color: $ui-info;

  // styling the icon
  &::before {
    color: $text-color-white;

    background-color: $primary-color-base;
    border-color: $primary-color-base;
  }
}