// Name:            List
// Description:     Styles for lists
//
// Component:       `uk-list`
//
// Modifiers:       `uk-list-divider`
//                  `uk-list-striped`
//                  `uk-list-bullet`
//                  `uk-list-large`
//
// ========================================================================


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

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

$list-nested-padding-left:                       $global-gutter !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-bullet-width:                              ($global-line-height * 1em) !default;
$list-bullet-height:                             $list-bullet-width !default;
$list-bullet-margin-right:                       $global-small-margin !default;
$list-bullet-icon-color:                         $global-color !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;
}

/*
 * Micro clearfix
 */

.uk-list > li::before,
.uk-list > li::after {
    content: "";
    display: table;
}

.uk-list > li::after { clear: both; }

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

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

/*
 * Nested lists
 */

.uk-list ul {
    margin: 0;
    padding-left: $list-nested-padding-left;
    list-style: none;
}

/*
 * Style
 */

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


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

/*
 * Divider
 */

.uk-list-divider > li: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 > li {
    padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
    @if(mixin-exists(hook-list-striped)) {@include hook-list-striped();}
}

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

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

/*
 * Bullet
 * 1. Reset display table which causes issues in combination with multi column layouts
 */

.uk-list-bullet > li {
    position: relative;
    padding-left: unquote('calc(#{$list-bullet-width} + #{$list-bullet-margin-right})');
}

.uk-list-bullet > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: $list-bullet-width;
    height: $list-bullet-height;
    @include svg-fill($internal-list-bullet-image, "#000", $list-bullet-icon-color);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /* 1 */
    display: block;
    @if(mixin-exists(hook-list-bullet)) {@include hook-list-bullet();}
}


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

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

/*
 * Divider
 */

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

/*
 * Striped
 */

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

.uk-list-large.uk-list-striped > li: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-bullet(){}
// @mixin hook-list-misc(){}


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

$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(){}
// @mixin hook-inverse-list-bullet(){}