$grouplist-max-width: dynamic(640px);
$grouplist-padding: dynamic(15px 10px);
$grouplist-background-color: dynamic(#fff);
$grouplist-border-color: dynamic($grouplist-background-color);
$grouplist-border-width: dynamic(1px);
$grouplist-border-style: dynamic(solid);
$grouplist-item-height: dynamic(null);
$grouplist-item-width: dynamic(150px);
$grouplist-item-padding: dynamic(6px 10px);
$grouplist-item-font-family: dynamic($font-family);
$grouplist-item-font-size: dynamic($font-size);
$grouplist-item-font-weight: dynamic(normal);
$grouplist-item-text-color: dynamic($color);
$grouplist-item-border-width: dynamic(1px);
$grouplist-item-border-style: dynamic(solid);
$grouplist-item-border-color: dynamic($grouplist-background-color);
$grouplist-item-over-text-color: dynamic($base-color);
$grouplist-item-over-border-color: dynamic(transparent);
$grouplist-item-over-background-color: dynamic(#e6f7ff);
$grouplist-item-selected-text-color: dynamic(#fff);
$grouplist-item-selected-border-color: dynamic($base-color);
$grouplist-item-selected-background-color: dynamic($base-color);

.#{$prefix}grouplist {
    padding: $grouplist-padding;
    max-width: $grouplist-max-width;
    border-width: $grouplist-border-width;
    border-style: $grouplist-border-style;
    border-color: $grouplist-border-color;
    background: $grouplist-background-color;

    .#{$prefix}grouplist-innerCt {
        display: inline;

        >.#{$prefix}grouplist-header:first-child {
            margin-top: 0;
        }
    }
}

.#{$prefix}grouplist-header {
    border-left: 5px solid $base-color;
    padding-left: 8px;
    margin: 10px 0;
    line-height: 15px;
    font-weight: bold;
}

.#{$prefix}grouplist-item {
    display: inline-block;
    padding: $grouplist-item-padding;
    font: $grouplist-item-font-weight $grouplist-item-font-size $grouplist-item-font-family;
    @if not is-null($grouplist-item-height) {
        line-height: $grouplist-item-height - vertical($grouplist-item-border-width) - vertical($grouplist-item-padding);
    }
    vertical-align: top;

    width: $grouplist-item-width;
    cursor: pointer;
    cursor: hand;
    position: relative; /*allow hover in IE on empty items*/

    border-width: $grouplist-item-border-width;
    border-style: $grouplist-item-border-style;
    border-color: $grouplist-item-border-color;
    color: $grouplist-item-text-color;

    &.#{$prefix}view-item-focused {
        outline: none;
        @if $grouplist-item-selected-text-color != $grouplist-item-text-color {
            color: $grouplist-item-selected-text-color;
        }
        background: $grouplist-item-selected-background-color;
        border-color: $grouplist-item-selected-border-color;
    }
}

.#{$prefix}grouplist-selected {
    @if $grouplist-item-selected-text-color != $grouplist-item-text-color {
        color: $grouplist-item-selected-text-color;
    }
    background: $grouplist-item-selected-background-color;
    border-color: $grouplist-item-selected-border-color;
}

.#{$prefix}grouplist-item-over {
    @if $grouplist-item-over-text-color != $grouplist-item-text-color or
            $grouplist-item-over-text-color != $grouplist-item-selected-text-color {
        color: $grouplist-item-over-text-color;
    }
    background: $grouplist-item-over-background-color;
    border-color: $grouplist-item-over-border-color;
}

.#{$prefix}grouplist-floating {
    border-top-width: 0;
}

.#{$prefix}grouplist-above {
    border-top-width: 1px;
    border-bottom-width: 1px;
}