@import './../mixins', './../functions', './../variables';

$ul: (
  'margin-bottom': 16,
  'padding-left': 40,
);
$checkmarks: (
  'width': 16,
  'top': 7,
  'margin-right': 12,
);
$li: (
  'margin-bottom': 12,
  'margin-bottom_sm': 8,
  'margin-bottom_md': 10,
);

@layer base {
  ol,
  ul {
    margin: 0 0 px-to-rem(get-map($ul, 'margin-bottom'));
    padding-left: px-to-rem(get-map($ul, 'padding-left'));
    display: block;

    &.unstyled {
      list-style: none;
      padding-left: 0;
    }
  }

  ul.checkmarks {
    list-style: none;

    li {
      position: relative;
      padding-left: px-to-rem(
        get-map($checkmarks, 'width') + get-map($checkmarks, 'margin-right')
      );

      &::before {
        @include image('icons/check-inside-circle.svg', true);

        content: '';
        width: px-to-rem(get-map($checkmarks, 'width'));
        height: px-to-rem(get-map($checkmarks, 'width'));
        background: get-map($theme, 'list_checkmarks_bg');
        position: absolute;
        top: px-to-rem(get-map($checkmarks, 'top'));
        left: 0;
      }
    }
  }

  li {
    margin-bottom: px-to-rem(get-map($li, 'margin-bottom'));

    .text-small & {
      margin-bottom: px-to-rem(get-map($li, 'margin-bottom_sm'));
    }

    .text-medium & {
      margin-bottom: px-to-rem(get-map($li, 'margin-bottom_md'));
    }

    &:last-child {
      margin-bottom: 0;

      p:last-child {
        margin-bottom: 0;
      }
    }
  }
}
