@prefix: graphjs;

@{prefix}-star-list.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    .@{prefix}-header {
        border-color: transparent;
    }
    .@{prefix}-content {
        min-height: 24.5em;
        .no-padding !important;
        .@{prefix}-bar {
            display: table;
            width: 100%;
            height: auto;
            & > * {
                float: left;
                border-radius: 0;
            }
            .@{prefix}-search {
                width: 100%;
                // ThemeOption: background-color: desaturate(tint(@primary-color, 20%), 5%);
                & > * {
                    float: left;
                    border-radius: 0;
                }
                .@{prefix}-icon {
                    width: 3.5em;
                    height: 3.5em;
                    svg {
                        position: relative;
                        width: 1.3em;
                        height: 1.3em;
                        margin: 1.1em;
                        vertical-align: middle;
                        path {
                            fill: white;
                            .transition(fill .35s ease);
                        }
                    }
                }
                input, input[type] {
                    width: calc(100% - 3.5em);
                    height: 3.5em;
                    .no-padding;
                    color: white;
                    line-height: 3.5em;
                    border: none;
                    background-color: transparent;
                    .placeholder-color(fade(white, 75%));
                }
            }
        }
        .@{prefix}-list {
            overflow: hidden;
            display: inline-block;
            width: 100%;
            height: auto;
            vertical-align: middle;
            .@{prefix}-item {
                display: table;
                width: 100%;
                // ThemeOption: color: @text-color-normal;
                line-height: 3.5em;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: fade(black, 10%);
                &:last-child {
                    border-bottom: none;
                }
                &:hover {
                    background-color: fade(black, 2.5%);
                    .@{prefix}-remove {
                        display: block;
                    }
                }
                &.@{prefix}-hidden {
                    display: none !important;
                }
                &.@{prefix}-placeholder {
                    // ThemeOption: color: @text-color-weak;
                    text-align: center;
                }
                & > * {
                    float: left;
                    &:first-child {
                        border-left: none;
                    }
                }
                & > .@{prefix}-icon {
                    display: block;
                    float: left;
                    position: relative;
                    width: 4em;
                    height: 3.5em;
                    padding: .75em 0;
                    padding-right: 1em;
                    text-align: center;
                    .border-radius(inherit);
                    .clearfix;
                    &.@{prefix}-count {
                        width: 7.5em;
                    }
                    &.@{prefix}-default {
                        div {
                            background-color: orange;
                        }
                    }
                    &.@{prefix}-like {
                        div {
                            background-color: dodgerblue;
                        }
                    }
                    &.@{prefix}-love {
                        div {
                            background-color: crimson;
                            svg {
                                padding-top: 2px;
                            }
                        }
                    }
                    &.@{prefix}-save {
                        div {
                            background-color: lightseagreen;
                            svg {
                                padding-top: 2px;
                            }
                        }
                    }
                    div {
                        display: inline-block;
                        float: left;
                        margin-left: 1em;
                        width: auto;
                        height: 2em;
                        .border-radius(@border-radius-large);
                        .clearfix;
                        & > * {
                            float: left;
                        }
                        .@{prefix}-icon {
                            width: 2em;
                            height: 2em;
                            svg {
                                display: inline-block;
                                position: relative;
                                top: -1px;
                                width: 50%;
                                height: 50%;
                                margin: 25%;
                                vertical-align: top;
                                path {
                                    fill: white;
                                }
                            }
                        }
                        .@{prefix}-count {
                            color: white;
                            .bold-font;
                            font-size: 1.5em;
                            line-height: 4em / 3;
                            margin-right: 1em / 3;
                            .disable-selection;
                        }
                    }
                }
                .@{prefix}-title {
                    cursor: pointer;
                    width: calc(100% - 7.5em);
                    // ThemeOption: color: @text-color-strong;
                    .single-line-text;
                    &:hover {
                        &::after {
                            margin-left: .5em;
                            opacity: 1;
                        }
                    }
                    &::after {
                        content: "\2192";
                        display: inline;
                        margin-left: 0;
                        opacity: 0;
                        .transition(all .35s ease);
                    }
                }
                .@{prefix}-remove {
                    display: none;
                    cursor: pointer;
                    width: 3.5em;
                    height: 3.5em;
                    .icon-color-states(@danger-color);
                    svg {
                        width: 1.3em;
                        height: 1.3em;
                        margin: 1.1em;
                    }
                }
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        &.@{prefix}-tight {
            .@{prefix}-list {
                .@{prefix}-item {
                    .@{prefix}-icon {
                        width: 2em;
                        margin-left: .25em;
                    }
                }
            }
        }
        .@{prefix}-bar {
            display: block;
            width: 100%;
            height: 3.5em;
        }
        .@{prefix}-list {
            display: block;
            width: 100%;
            .@{prefix}-item {
                display: block;
                width: 100%;
                height: 3.5em;
                padding: .75em;
                .@{prefix}-icon {
                    display: block;
                    width: 4em;
                    height: 2em;
                    margin-left: .5em;
                    font-size: 1em;
                    .border-radius(calc(1em / 2));
                }
                .@{prefix}-title {
                    display: block;
                    width: calc(100% - 7.3em);
                    height: .9em;
                    max-width: 30em;
                    margin: .55em;
                    margin-left: 2.25em;
                    .border-radius(calc(.9em / 2));
                }
            }
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-star-list.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-list {
                .@{prefix}-item {
                    .@{prefix}-remove {
                        display: block;
                    }
                }
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-star-list.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-list {
                .@{prefix}-item {
                    .@{prefix}-remove {
                        display: block;
                    }
                }
            }
        }
    }
}