// =List
.list-unstyled,
.list-inline,
.list-checkmark,
.list-dashed {
    list-style: none;
    margin-left: 0;
}
.list-inline li {
    display: inline;
    white-space: nowrap;
    margin-right: 0.25em;
}
.list-checkmark,
.list-dashed {
    position: relative;
}
.list-checkmark {
    // params
    --list-mark-color: var(--text-default);
    --list-mark: "\2713";

    // props
    padding-left: 1.3em;
}
.list-dashed {
    // params
    --list-mark-color: var(--text-default);
    --list-mark: "\2014";

    // props
    padding-left: 1.35em;
}
.list-checkmark li:before,
.list-dashed li:before {
    position: absolute;
    left: 0;
    content: var(--list-mark);
    color: var(--list-mark-color);
}
.list-checkmark.list-light {
    --list-color: var(--palette-white-90);
    --list-mark-color: var(--palette-white-80);
}
.list-dashed.list-light {
    --list-color: var(--palette-white-90);
    --list-mark-color: var(--palette-white-80);
}

.list {
    // colors
    --list-item-color: var(--text-default);

    // params
    --list-font-size: var(--type-scale-15);
    --list-line-height: 1.3;
    --list-item-space: 0;
    --list-item-padding-y: 6px;
    --list-item-padding-x: 0;
    --list-item-font-weight: normal;

    // props
    list-style: none;
    margin-left: 0;
    color: var(--list-color);

    .list-item {
        font-size: var(--list-font-size);
        font-weight: var(--list-item-font-weight);
        line-height: var(--list-line-height);
        padding-top: var(--list-item-padding-y);
        padding-bottom: var(--list-item-padding-y);
        padding-left: var(--list-item-padding-x);
        padding-right: var(--list-item-padding-x);
        margin-bottom: var(--list-item-space);
        color: var(--list-item-color);
    }
    .list-item:last-child {
        margin-bottom: 0;
    }
    .list-item .list {
        width: 100%;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-left: 5rem;
    }
    .list + h4,
    .list + h5,
    .list + h6 {
        margin-top: 5rem;
    }
    & .label {
        margin-top: -2px;
    }
}
// Variants
.list-medium {
    --list-font-size: var(--type-scale-14);
}
.list-small {
    --list-font-size: var(--type-scale-13);
}
.list-light {
    --list-item-color: var(--palette-white-90);
}
.list-strong {
    --list-item-font-weight: bold;
}
.list-semibold {
    --list-item-font-weight: var(--font-weight-semibold);
}

// Stacked
.list-stacked {
    // colors
    --list-item-border-color: var(--palette-black-7);

    // params
    --list-item-padding-y: 8px;
    --list-item-border-width: 1px;
    --list-item-border-style: solid;

    .list-item {
        border-bottom-width: var(--list-item-border-width);
        border-bottom-style: var(--list-item-border-style);
        border-bottom-color: var(--list-item-border-color);
    }
    .list-item:last-child {
        border-bottom-color: transparent;
    }
}
.list-stacked.list-light {
    --list-border-color: var(--palette-white-20);
}

// Bordered
.list-bordered {
    // colors
    --list-border-color: var(--palette-black-7);

    // params
    --list-border-width: 1px;
    --list-border-style: solid;
    --list-border-radius: var(--radius-base);
    --list-item-padding-y: 6px;
    --list-item-padding-x: 12px;
    --list-item-space: 1px;

    // props
    border-width: var(--list-border-width);
    border-radius: var(--list-border-radius);
    border-style: var(--list-border-style);
    border-color: var(--list-border-color);

    .list-item:last-child {
        margin-bottom: 0;
    }
}
.list-bordered.list-light {
    --list-border-color: var(--palette-white-20);
}

// Numbered
.list-numbered {
    // colors
    --list-number-color: var(--palette-black-60);

    // params
    --list-number-font-size: 80%;
    --list-number-width: 22px;

    // props
    counter-reset: numbers;

    .list-item {
        display: flex;
        align-items: center;
        counter-increment: numbers;
    }
    .list-item:before {
        width: var(--list-number-width);
        font-size: var(--list-number-font-size);
        content: counter(numbers, decimal-leading-zero);
        color: var(--list-number-color);
    }
}
.list-numbered.list-light {
    --list-number-color: var(--palette-white-60);
}
.list-numbered-right {
    .list-item {
        position: relative;
        padding-right: calc(var(--list-number-width) + 4px);
    }
    .list-item:before {
        display: none;
    }
    .list-item:after {
        position: absolute;
        right: 0;
        width: var(--list-number-width);
        font-size: var(--list-number-font-size);
        content: counter(numbers, decimal-leading-zero);
        text-align: right;
        color: var(--list-number-color);
    }
}
// Dark theme
@include dark-theme {
    .list-light {
        --list-item-color: var(--palette-white-90);
    }
    .list-stacked,
    .list-stacked.list-light {
        --list-item-border-color: var(--palette-white-15);
    }
    .list-bordered,
    .list-bordered.list-light {
        --list-border-color: var(--palette-white-15);
    }
    .list-numbered,
    .list-numbered.list-light {
        --list-number-color: var(--palette-white-50);
    }
    .list-checkmark,
    .list-checkmark.list-light {
        --list-mark-color: var(--palette-white-80);
    }
    .list-dashed,
    .list-dashed.list-light {
        --list-mark-color: var(--palette-white-80);
    }
}