@import "../Theme/Theme.scss";

$behavior-item-height: 45px;

div.behavior-list {
	margin: -5px;
	display: flex;
	flex-wrap: wrap;

	div.behavior-item {
		margin: 5px;
		height: 45px;
		user-select: none;
		border-radius: 3px;
        overflow: hidden;
		cursor: pointer;
        
        div.behavior-color-view {
            height: 0;
            width: 100%;

            div {
                width: 0;
                height: 0;
                border-bottom: 12px solid transparent;
                position: relative;
                z-index: 2;
            }
        }

        div.behavior-item-root {
            display: flex;

            div.behavior-popup-menu {
                width: 0;
                max-width: 0;
                height: $behavior-item-height;
                min-height: $behavior-item-height;
                position: relative;
                z-index: 1;

                div.behavior-popup-layout {
                    width: 0;
                    opacity: 0;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    div.behavior-popup-action-view {
                        height: 15px;
                        min-height: 26px;
                        max-height: 26px;
                        width: 100%;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        div.behavior-action-button {
                            height: 100%;
                            flex-shrink: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-content: center;
                            align-items: center;
                            padding: 0 2px;
                        }

                        div.behavior-action-button.hover-red:hover i {
                            color: $lt-red;
                        }
        
                        div.behavior-action-button.hover-blue:hover i {
                            color: $lt-blue;
                        }
                    }
                }
            }

            div.behavior-icon-view {
                height: $behavior-item-height;
                min-width: $behavior-item-height;
                width: $behavior-item-height;
                user-select: none;
                display: flex;
                justify-content: center;
                align-items: center;

                i {
                    font-size: 25px;
                }
            }

            div.behavior-content-view {
                width: calc( 100% - 50px );
                padding-right: 5px;
                max-width: 125px;
                height: $behavior-item-height;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: stretch;

                div.title-view {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 100%;
                }

                div.info-view {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 100%;
                    opacity: .75;
                }
            }
        }
	}
    
    div.behavior-item:hover {

        div.behavior-popup-menu div.behavior-popup-layout {
            width: $behavior-item-height !important;
            opacity: 1 !important;
        }
    }

    div.add-button {
        width: 26px;
        height: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

div.dark.behavior-list {

	div.behavior-item {
		background-color: $lt-bg-color-lvl3-dark;
	}

	div.behavior-item:hover {
		color: $lt-font-color-lvl2-dark;
		background-color: $lt-bg-color-lvl2-dark;

        div.behavior-popup-menu div.behavior-popup-layout {
            background-color: $lt-bg-color-lvl2-dark;
        }
	}

	div.behavior-item.focus {
		color: $lt-font-color-lvl1-dark;
    	background-color: $lt-bg-color-lvl1-dark;

        div.behavior-popup-menu div.behavior-popup-layout {
            background-color: $lt-bg-color-lvl1-dark;
        }
	}
}

div.light.behavior-list {
	
	div.behavior-item {
		background-color: $lt-bg-color-lvl3-light;
	}

	div.behavior-item:hover {
		color: $lt-font-color-lvl2-light;
		background-color: $lt-bg-color-lvl2-light;

        div.behavior-popup-menu div.behavior-popup-layout {
            background-color: $lt-bg-color-lvl2-light;
        }
	}

	div.behavior-item.focus {
		color: $lt-font-color-lvl1-light;
    	background-color: $lt-bg-color-lvl1-light;

        div.behavior-popup-menu div.behavior-popup-layout {
            background-color: $lt-bg-color-lvl1-light;
        }
	}
}