/**
 * @var {color} $list-color
 * Text color for list rows.
 */
$list-color: #000 !default;

/**
 * @var {color} $list-bg-color
 * Background-color for list rows.
 */
$list-bg-color: #f7f7f7 !default;

/**
 * @var {color} $include-list-highlights
 * Optionally disable all list gradients, text-shadows, and box-shadows. Useful for CSS debugging,
 * non-performant browsers, or minimalist designs.
 */
$include-list-highlights: $include-highlights !default;

/**
 * @var {boolean} $list-zebrastripe
 * Optionally zebra-stripe the list (alternating background colors).
 */
$list-zebrastripe: false !default;

/**
 * @var {color} $list-pressed-color
 * Background-color for pressed list rows.
 */
$list-pressed-color: lighten($active-color, 50%) !default;

/**
 * @var {color} $list-active-color
 * Background-color for selected list rows.
 */
$list-active-color: $active-color !default;

/**
 * @var {string} $list-active-gradient
 * Gradient style for selected list rows.
 */
$list-active-gradient: $base-gradient !default;

/**
 * @var {color} $list-header-bg-color
 * Background-color for list header rows (in grouped lists).
 */
$list-header-bg-color: lighten(saturate($base-color, 10%), 20%) !default;

/**
 * @var {string} $list-header-gradient
 * Gradient style for list header rows (in grouped lists).
 */
$list-header-gradient: $base-gradient !default;

/**
 * @var {measurement} $list-disclosure-size
 * Default size (width/height) for disclosure icons.
 */
$list-disclosure-size: 32px;

/**
 * @var {measurement} $list-disclosure-round-size
 * Default size (width/height) for disclosure icons in a list with a `round` ui.
 */
$list-disclosure-round-size: 1.5em;

/**
 * @var {measurement} $list-round-padding
 * Default padding for lists with a `round` ui.
 */
$list-round-padding: 13px !default;

/**
 * @var {measurement} $list-rounded-radius
 * Default border-radius for items in rounded list
 */
$list-rounded-radius: .4em !default;

.x-list {
    background-color: $list-bg-color;

    .x-list-disclosure {
        position: relative;
        overflow: visible;
        border: 0;
        @include border-radius($list-disclosure-size);
        @include background-gradient(saturate($active-color, 10%));
        width: $list-disclosure-size;
        height: $list-disclosure-size;
        margin: 7px 7px 0 0;

        &:before {
            @include absolute-position(0, 0, 0, 0);
            content: ']';
            font-family: 'Pictos';
            color: #fff;
            font-size: 24px;
            text-align: center;
            line-height: 35px;
            text-shadow: 0 0 0;
        }
    }

    &.x-list-indexed .x-list-disclosure {
        margin-right: 1.8em;
    }

    .x-item-selected .x-list-disclosure {
        background: #fff none;

        &:before {
            color: $active-color;
        }
    }

    .x-list-item {
        color: $list-color;

        &.x-item-pressed {
            .x-dock-horizontal {
                background: $list-pressed-color none;
            }
        }

        &.x-item-selected .x-dock-horizontal {
            @include background-gradient($list-active-color, $list-active-gradient);
            @include color-by-background($list-active-color);
        }

        .x-list-item-body {
            min-height: $global-list-height;
            padding: 0.65em 0.8em;
        }
    }
}

.x-list-normal {
    &.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
        padding-top: 26px;
    }

    .x-list-header-wrap .x-item-header,
    .x-list-header {
        @include background-gradient($list-header-bg-color, $list-header-gradient);
        @include color-by-background($list-header-bg-color, 30%);
        @include bevel-by-background($list-header-bg-color);
        border-top: 1px solid $list-header-bg-color;
        border-bottom: 1px solid darken($list-header-bg-color, 20%);
        font-weight: bold;
        font-size: 0.8em;
        padding: 0.2em 1.02em;
    }

    @if $list-zebrastripe {
        .x-list-item {
            .x-dock-horizontal {
                border-top: 1px solid transparent;
            }

            &:nth-child(even) .x-dock-horizontal {
                background-color: darken($list-bg-color, 5%);
            }

            &.x-list-footer-wrap:nth-child(odd) .x-dock-horizontal {
                border-bottom: 1px solid darken($list-bg-color, 5%);
            }
        }
    } @else {
        .x-list-item {
            .x-dock-horizontal {
                border-top: 1px solid darken($list-bg-color, 10%);
            }

            &.x-list-footer-wrap .x-dock-horizontal {
                border-bottom: 1px solid darken($list-bg-color, 10%);
            }
        }
    }

    .x-list-item {
        @if $include-list-highlights {
            &.x-item-pressed .x-dock-horizontal {
                border-top-color: $list-pressed-color;
                background-color: $list-pressed-color;
            }

            &.x-item-selected .x-dock-horizontal {
                border-top-color: $list-active-color;
            }
        }
    }
}

.x-list-round {
    &.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
        padding-top: 31px;
    }

    .x-scroll-view {
        background-color: #eee;
    }

    .x-list-header-swap {
        padding-right: $list-round-padding;
    }

    .x-list-inner .x-scroll-container {
        top: $list-round-padding;
        left: $list-round-padding;
        bottom: $list-round-padding;
        right: $list-round-padding;
        width: auto !important;
        height: auto !important;
    }

    .x-list-disclosure {
        overflow: hidden;
        -webkit-mask: 0 0 theme_image('default', "disclosure2.png") no-repeat;
        -webkit-mask-size: $list-disclosure-round-size;
        @include background-gradient(lighten(desaturate($base-color, 10), 10));
        width: $list-disclosure-round-size;
        height: $list-disclosure-round-size;
        margin: 0.5em 0.5em 0 0;
    }

    .x-list-header {
        color: #777;
        font-size: 1em;
        font-weight: bold;
        padding-left: 26px;
        line-height: 1.7em;
        @include background-image(linear-gradient(top, rgba(238, 238, 238, 1), rgba(238, 238, 238, .9) 30%, rgba(238, 238, 238, .4)));
    }

    .x-list-container {
        padding: $list-round-padding $list-round-padding 0 $list-round-padding;

        .x-list-header {
            padding-left: $list-round-padding;
            background-image: none;
        }
    }

    &.x-list-ungrouped,
    &.x-list-grouped {
        .x-list-item .x-dock-horizontal {
            border: 1px solid darken($list-bg-color, 10%);
            border-width: 1px 1px 0 1px;
            background: $list-bg-color;
        }
    }

    &.x-list-ungrouped {
        .x-list-item {
            &:first-child {
                @if $include-border-radius {
                    @include border-top-radius($list-rounded-radius);
                }
            }

            &:last-child {
                @if $include-border-radius {
                    @include border-bottom-radius($list-rounded-radius);
                }
                border-width: 1px;
                margin-bottom: $list-round-padding;
            }
        }
    }

    &.x-list-grouped {
        .x-list-header-wrap {
            .x-dock-horizontal {
                @if $include-border-radius {
                    @include border-top-radius($list-rounded-radius);
                }
            }

            .x-list-header {
                border: 1px solid darken($list-bg-color, 10%);
                border-width: 1px 1px 0 1px;
                @if $include-border-radius {
                    @include border-top-radius($list-rounded-radius);
                }
            }
        }

        .x-list-footer-wrap {
            background: transparent;

            .x-dock-horizontal {
                border: none;
                background: transparent;
                padding-bottom: $list-round-padding;

                > .x-dock-body {
                    border: 1px solid darken($list-bg-color, 10%);
                    background: $list-bg-color;
                    @if $include-border-radius {
                        @include border-bottom-radius($list-rounded-radius);
                    }
                }
            }
        }
    }
}
