@use "sass:meta";

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

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

.uk-list-disc { list-style-type: disc; }
.uk-list-circle { list-style-type: circle; }
.uk-list-square { list-style-type: square; }
.uk-list-decimal { list-style-type: decimal; }
.uk-list-hyphen { list-style-type: '–  '; }

/*
 * Color modifiers
 */

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


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

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

.uk-list-bullet > ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: $list-padding-left;
    height: $global-line-height * 1em;
    @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(meta.mixin-exists(hook-list-divider)) {@include hook-list-divider();}
}

/*
 * Striped
 */

.uk-list-striped > * {
    padding: $list-striped-padding-vertical $list-striped-padding-horizontal;
    @if(meta.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(meta.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(){}