// Name:            List
// Description:     Styles for lists
//
// Component:       `uk-list`
//
// Modifiers:       `uk-list-disc`
//                  `uk-list-circle`
//                  `uk-list-square`
//                  `uk-list-decimal`
//                  `uk-list-hyphen`
//                  `uk-list-muted`
//                  `uk-list-emphasis`
//                  `uk-list-primary`
//                  `uk-list-secondary`
//                  `uk-list-bullet`
//                  `uk-list-divider`
//                  `uk-list-striped`
//                  `uk-list-large`
//                  `uk-list-collapse`
//
// ========================================================================


// Variables
// ========================================================================

$list-margin-top:                                $global-small-margin !default;

$list-padding-left:                              30px !default;

$list-marker-height:                             ($global-line-height * 1em) !default;

$list-muted-color:                               $global-muted-color !default;
$list-emphasis-color:                            $global-emphasis-color !default;
$list-primary-color:                             $global-primary-background !default;
$list-secondary-color:                           $global-secondary-background !default;

$list-bullet-icon-color:                         $global-color !default;

$list-divider-margin-top:                        $global-small-margin !default;
$list-divider-border-width:                      $global-border-width !default;
$list-divider-border:                            $global-border !default;

$list-striped-padding-vertical:                  $global-small-margin !default;
$list-striped-padding-horizontal:                $global-small-margin !default;
$list-striped-background:                        $global-muted-background !default;

$list-large-margin-top:                          $global-margin !default;
$list-large-divider-margin-top:                  $global-margin !default;
$list-large-striped-padding-vertical:            $global-margin !default;
$list-large-striped-padding-horizontal:          $global-small-margin !default;

$internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;


/* ========================================================================
   Component: List
 ========================================================================== */

.uk-list {
    padding: 0;
    list-style: none;
}

/*
 * Remove margin from the last-child
 */

.uk-list > * > :last-child { margin-bottom: 0; }

/*
 * Style
 */

.uk-list > :nth-child(n+2),
.uk-list > * > ul { margin-top: $list-margin-top; }


/* Marker modifiers
 * Moving `::marker` inside `::before` to style it differently
 * To style the `::marker` is currently only supported in Firefox and Safari
 ========================================================================== */

.uk-list-disc > *,
.uk-list-circle > *,
.uk-list-square > *,
.uk-list-decimal > *,
.uk-list-hyphen > * { padding-left: $list-padding-left; }

/*
 * Type modifiers
 */

.uk-list-decimal { counter-reset: decimal; }
.uk-list-decimal > * { counter-increment: decimal; }

.uk-list-disc > ::before,
.uk-list-circle > ::before,
.uk-list-square > ::before,
.uk-list-decimal > ::before,
.uk-list-hyphen > ::before {
    content: "";
    position: relative;
    left: (-$list-padding-left);
    width: $list-padding-left;
    height: $list-marker-height;
    margin-bottom: (-$list-marker-height);
    display: list-item;
    list-style-position: inside;
    text-align: right;
}

.uk-list-disc > ::before { list-style-type: disc; }
.uk-list-circle > ::before { list-style-type: circle; }
.uk-list-square > ::before { list-style-type: square; }
.uk-list-decimal > ::before { content: counter(decimal, decimal) '\200A.\00A0'; }
.uk-list-hyphen > ::before { content: '–\00A0\00A0'; }

/*
 * Color modifiers
 */

.uk-list-muted > ::before { color: $list-muted-color !important; }
.uk-list-emphasis > ::before { color: $list-emphasis-color !important; }
.uk-list-primary > ::before { color: $list-primary-color !important; }
.uk-list-secondary > ::before { color: $list-secondary-color !important; }


/* Image bullet modifier
 ========================================================================== */

.uk-list-bullet > * { padding-left: $list-padding-left; }

.uk-list-bullet > ::before {
    content: "";
    display: list-item;
    position: relative;
    left: (-$list-padding-left);
    width: $list-padding-left;
    height: $list-marker-height;
    margin-bottom: (-$list-marker-height);
    @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


/* Style modifiers
 ========================================================================== */

/*
 * Divider
 */

.uk-list-divider > :nth-child(n+2) {
    margin-top: $list-divider-margin-top;
    padding-top: $list-divider-margin-top;
    border-top: $list-divider-border-width solid $list-divider-border;
    @if(mixin-exists(hook-list-divider)) {@include hook-list-divider();}
}

/*
 * Striped
 */

.uk-list-striped > * {
    padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
    @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
}

.uk-list-striped > :nth-of-type(odd) { background: $list-striped-background; }

.uk-list-striped > :nth-child(n+2) { margin-top: 0; }


/* Size modifier
 ========================================================================== */

.uk-list-large > :nth-child(n+2),
.uk-list-large > * > ul { margin-top: $list-large-margin-top; }

.uk-list-collapse > :nth-child(n+2),
.uk-list-collapse > * > ul { margin-top: 0; }

/*
 * Divider
 */

.uk-list-large.uk-list-divider > :nth-child(n+2) {
    margin-top: $list-large-divider-margin-top;
    padding-top: $list-large-divider-margin-top;
}

.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
    margin-top: 0;
    padding-top: 0;
}

/*
 * Striped
 */

.uk-list-large.uk-list-striped > * { padding: $list-large-striped-padding-vertical $list-large-striped-padding-horizontal; }

.uk-list-collapse.uk-list-striped > * {
    padding-top: 0;
    padding-bottom: 0;
}

.uk-list-large.uk-list-striped > :nth-child(n+2),
.uk-list-collapse.uk-list-striped > :nth-child(n+2) { margin-top: 0; }


// Hooks
// ========================================================================

@if(mixin-exists(hook-list-misc)) {@include hook-list-misc();}

// @mixin hook-list-divider(){}
// @mixin hook-list-striped(){}
// @mixin hook-list-misc(){}


// Inverse
// ========================================================================

$inverse-list-muted-color:                         $inverse-global-muted-color !default;
$inverse-list-emphasis-color:                      $inverse-global-emphasis-color !default;
$inverse-list-primary-color:                       $inverse-global-primary-background !default;
$inverse-list-secondary-color:                     $inverse-global-primary-background !default;

$inverse-list-divider-border:                      $inverse-global-border !default;
$inverse-list-striped-background:                  $inverse-global-muted-background !default;

$inverse-list-bullet-icon-color:                   $inverse-global-color !default;



// @mixin hook-inverse-list-divider(){}
// @mixin hook-inverse-list-striped(){}