// 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
// ========================================================================











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

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

/*
 * Avoid column break within the list item, when using `column-count`
 */

.uk-list > * { break-inside: avoid-column; }

/*
 * 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
// ========================================================================






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