/**
 * Checklist
 */

// Dependencies
@import 'config/variables';
@import 'config/cdn';
@import 'config/direction';
@import 'config/dimensions';

$icons: map-get($variables, 'icons-checklist');

// Declarations
@mixin checklist {
  list-style: none;
  padding: 0;

  li {
    padding-bottom: $spacing-base
  }

  > li {
    padding-#{$text-direction-start}: $spacing-base * 2;
    background-image: url('#{$cdn}#{$path-to-images}#{map-get($icons, 'icon-check')}');
    background-position: $text-direction-start top;
    background-repeat: no-repeat;
    background-size: map-get($variables, 'em-base') * 1.5 + px auto;
  }

  // Nested lists
  ul, ol {
    margin-top: $spacing-base;
    padding-bottom: 0;
    margin-bottom: 0;
    padding-#{$text-direction-start}: $spacing-base;
  }

  ul > li,
  ol > li {
    background-image: none !important;

    &:last-of-type {
      padding-bottom: 0
    }
  }
}

.c-checklist > ul {
  @include checklist;
}

.c-checklist__item-application {
  background-image: url('#{$cdn}#{$path-to-images}#{map-get($icons, 'icon-application')}') !important
}

.c-checklist__item-badge {
  background-image: url('#{$cdn}#{$path-to-images}#{map-get($icons, 'icon-badge')}') !important
}

.c-checklist__item-flag {
  background-image: url('#{$cdn}#{$path-to-images}#{map-get($icons, 'icon-flag')}') !important
}

.c-checklist__item-calendar {
  background-image: url('#{$cdn}#{$path-to-images}#{map-get($icons, 'icon-calendar')}') !important
}

.c-checklist__item-generic {
  background-image: url('#{$cdn}#{$path-to-images}#{map-get($icons, 'icon-generic')}') !important
}