/**
 * Portlet 容器
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-28 13:02
 */

.#{$classPrefix}-portlet {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	box-shadow: $shine-elevate-shadow;
	background-color: shine-get($shine-portlet, bg-color);
	margin-bottom: shine-get($shine-portlet, bottom-space, desktop);
	
	// Global white content mode
	.#{$classPrefix}-page-content-white & {
		box-shadow: $shine-elevate-shadow-2;
	}

	@include shine-rounded {
		border-radius: $shine-border-radius;
	}

	// Base
	.#{$classPrefix}-portlet__head {
		display: flex; 
		align-items: stretch;
		justify-content: space-between;
		position:relative;
		padding: 0 shine-get($shine-portlet, space, desktop);
		border-bottom: 1px solid shine-get($shine-portlet, border-color);
		min-height: shine-get($shine-portlet, min-height, default, desktop);

		&.#{$classPrefix}-portlet__head--right {
			justify-content: flex-end;
		}

		&.#{$classPrefix}-portlet__head--noborder {
			border-bottom: 0;
		}

		@include shine-rounded {
			border-top-left-radius: $shine-border-radius;
			border-top-right-radius: $shine-border-radius;
		}		
		
		.#{$classPrefix}-portlet__head-label {
			display: flex;
			align-items: center;
			align-content: flex-first;

			.#{$classPrefix}-portlet__head-title {
				margin: 0;
				padding: 0;
				font-size: 1.2rem;
				font-weight: 500;
				color: shine-base-color(label, 4);

				small {
					font-weight: 300;
					padding-left: 0.5rem;
					font-size: 1rem;
					color: shine-base-color(label, 2);
				}
			}

			.#{$classPrefix}-portlet__head-icon {
				padding-right: 0.75rem;
				font-size: 1.3rem;
				color:kt-base-color(label, 2);
			}
		}

		.#{$classPrefix}-portlet__head-toolbar {
			display: flex;
			align-items: center;
			align-content: flex-end;

			.nav-pills,
			.nav-tabs {
				margin: 0;
			}

			.#{$classPrefix}-portlet__head-wrapper {
				display: flex; 
				align-items: center;				
			}
		} 

		.#{$classPrefix}-portlet__head-progress {
			position: absolute; 
			left: 0; 
			right: 0; 
		}	
	}

	// Head sizing
	&.#{$classPrefix}-portlet--head-sm {
		.#{$classPrefix}-portlet__head {
			min-height: shine-get($shine-portlet, min-height, sm, desktop);
		}
	}

	&.#{$classPrefix}-portlet--head-lg {
		.#{$classPrefix}-portlet__head {
			min-height: shine-get($shine-portlet, min-height, lg, desktop);
		}
	}

	&.#{$classPrefix}-portlet--head-xl {
		.#{$classPrefix}-portlet__head {
			min-height: shine-get($shine-portlet, min-height, xl, desktop);
		}
	} 

	// Sticky portlet
	&.#{$classPrefix}-portlet--sticky {
		.#{$classPrefix}-portlet__head {
			height: shine-get($shine-portlet, min-height, default, desktop) - 10px;
			min-height: shine-get($shine-portlet, min-height, default, desktop) - 10px;

			&.#{$classPrefix}-portlet__head--sm {
				height: shine-get($shine-portlet, min-height, sm, desktop) - 10px;
				min-height: shine-get($shine-portlet, min-height, sm, desktop) - 10px;
			}

			&.#{$classPrefix}-portlet__head--lg {
				height: shine-get($shine-portlet, min-height, lg, desktop) - 10px;
				min-height: shine-get($shine-portlet, min-height, lg, desktop) - 10px;
			}

			&.#{$classPrefix}-portlet__head--xl {
				height: shine-get($shine-portlet, min-height, xl, desktop) - 10px;
				min-height: shine-get($shine-portlet, min-height, xl, desktop) - 10px;
			}
		}
	}
	
	// Head overlay
	&.#{$classPrefix}-portlet--head-overlay {
		.#{$classPrefix}-portlet__head {
			position: relative;
			z-index: 1;
			border: 0;
			height: shine-get($shine-portlet, min-height, default, desktop);
		}

		.#{$classPrefix}-portlet__body {
			margin-top: -(shine-get($shine-portlet, min-height, default, desktop));
		}

		// Head sizing
		&.#{$classPrefix}-portlet--head-sm {
			.#{$classPrefix}-portlet__head {
				height: shine-get($shine-portlet, min-height, sm, desktop);
			}

			.#{$classPrefix}-portlet__body {
				margin-top: -(shine-get($shine-portlet, min-height, sm, desktop));
			}
		}

		&.#{$classPrefix}-portlet--head-lg {
			.#{$classPrefix}-portlet__head {
				height: shine-get($shine-portlet, min-height, lg, desktop);
			}

			.#{$classPrefix}-portlet__body {
				margin-top: -(shine-get($shine-portlet, min-height, lg, desktop));
			}
		}

		&.#{$classPrefix}-portlet--head-xl {
			.#{$classPrefix}-portlet__head {
				height: shine-get($shine-portlet, min-height, xl, desktop);
			}

			.#{$classPrefix}-portlet__body {
				margin-top: -(shine-get($shine-portlet, min-height,xl, desktop));
			}
		}
	}

	.#{$classPrefix}-portlet__body {
		display: flex;
		flex-direction: column;
		padding: shine-get($shine-portlet, space, desktop);

		@include shine-rounded {
			border-radius: $shine-border-radius;
		}

		.#{$classPrefix}-portlet__content {
			padding: 0;
			margin: 0;
		}		

		// KTDatatable integration
		> .#{$classPrefix}-datatable {
			> .#{$classPrefix}-datatable__table {
				@include shine-rounded {
					border-radius: $shine-border-radius;
				}
			}
		}
	}

	.#{$classPrefix}-portlet__foot {
		padding: shine-get($shine-portlet, space, desktop);
		border-top: 1px solid shine-get($shine-portlet, border-color);

		.#{$classPrefix}-portlet__foot-wrapper {
			display:flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
		}		

		@include shine-rounded {
			border-bottom-left-radius: $shine-border-radius;
			border-bottom-right-radius: $shine-border-radius;
		}

		&.#{$classPrefix}-portlet__foot--sm {
			padding-top: 10px;
			padding-bottom: 10px;
		}

		&.#{$classPrefix}-portlet__foot--md {
			padding-top: 1rem;
			padding-bottom: 1rem;
		}

		&.#{$classPrefix}-portlet__foot--no-border {
			border-top: 0;
		}

		&.#{$classPrefix}-portlet__foot--top {
			border-top: 0;
			border-bottom: 1px solid shine-get($shine-portlet, border-color);
		}

		&.#{$classPrefix}-portlet__foot--solid {
			background-color: shine-base-color(grey, 1);
			border-top: 0;

			&.#{$classPrefix}-portlet__foot--top {
				 border-bottom: 0;
			}
		}
	}

	// Unelivate
	&.#{$classPrefix}-portlet--bordered {
		box-shadow: none;
		border: 1px solid shine-get($shine-portlet, border-color);
	}

	// Unelivate
	&.#{$classPrefix}-portlet--unelevate {
		box-shadow: none
	}

	// Unround
	&.#{$classPrefix}-portlet--unround {
		.#{$classPrefix}-portlet__head {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		.#{$classPrefix}-portlet__body {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		.#{$classPrefix}-portlet__foot {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}

	// Marginless
	&.#{$classPrefix}-portlet--last {
		margin-bottom: 0;
	}

	// Portlet body alignment
	.#{$classPrefix}-portlet__body {
		&.#{$classPrefix}-portlet__body--center {
			justify-content: center;
			align-items: center;
		}

		&.#{$classPrefix}-portlet__body--center-x {
			justify-content: center;
		}

		&.#{$classPrefix}-portlet__body--center-y {
			align-items: center;
		}

		.#{$classPrefix}-portlet__body--hor-fit {
			margin-left: -(shine-get($shine-portlet, space, desktop));
			margin-right: -(shine-get($shine-portlet, space, desktop));
		}

		&.#{$classPrefix}-portlet__body--stick-bottom {
			position: relative;
			bottom: 0;
		}

		&.#{$classPrefix}-portlet__body--fluid {
			height: 100%;
			flex-direction: row;
			flex-grow: 1;
			width: 100%;
		}

		// Full height
		&.#{$classPrefix}-portlet__body--fill {
			flex-grow: 1 !important;
		}

		// Non full height
		&.#{$classPrefix}-portlet__body--unfill {
			flex-grow: 0 !important;
		}

		&.#{$classPrefix}-portlet__body--fullheight {
			flex-grow: auto;
		}
	}

	// Padding options
	&.#{$classPrefix}-portlet--fit {
		.#{$classPrefix}-portlet__head {
			padding: 0;
		}

		.#{$classPrefix}-portlet__body {
			padding: 0;
		}

		.#{$classPrefix}-portlet__foot {
			padding: 0;
		}

		&.#{$classPrefix}-portlet--height-fluid-half {
		   align-items: stretch;

		   .#{$classPrefix}-portlet__body {
				height: 100%;
				flex-direction: column;
				align-items: stretch;
			}
		}
	}

	// Contain inner elements
	&.#{$classPrefix}-portlet--contain {
		overflow: hidden;
	}

	.#{$classPrefix}-portlet__head.#{$classPrefix}-portlet__head--fit {
		padding: 0;
	}

	.#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit {
		padding: 0;
	}

	.#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-top {
		padding-top: 0 !important;
	}

	.#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-bottom {
		padding-bottom: 0 !important;
	}
	
	.#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-x,
	.#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--hor-fit {
		padding-left: 0;
		padding-right: 0;
	}

	.#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-y {
		padding-top: 0;
		padding-bottom: 0;
	}

	.#{$classPrefix}-portlet__foot.#{$classPrefix}-portlet__foot--fit {
		padding: 0;
	}

	&.#{$classPrefix}-portlet--space {
		padding-left: shine-get($shine-portlet, space, desktop);
		padding-right: shine-get($shine-portlet, space, desktop);

		.#{$classPrefix}-portlet__head,
		.#{$classPrefix}-portlet__body,
		.#{$classPrefix}-portlet__foot {
			padding-left: 0;
			padding-right: 0;
		}
	}

	// Options
	// No border
	&.#{$classPrefix}-portlet--head-noborder {
		.#{$classPrefix}-portlet__head {
			border-bottom: 0;
		}

		.#{$classPrefix}-portlet__body {
			padding-top: shine-get($shine-portlet, space, desktop) / 2;
		}
	}

	// Tab style
	&.#{$classPrefix}-portlet--tabs {
		.#{$classPrefix}-portlet__head {
			.#{$classPrefix}-portlet__head-toolbar {
				display: flex;
				align-items: stretch; 
			}
		}		
	}

	// Tab 3x border style
	&.#{$classPrefix}-portlet--tabs-border-3x {
		.#{$classPrefix}-portlet__head {
			border-bottom: 3px solid shine-base-color(grey, 1);

			.nav.nav-tabs {
				margin-bottom: -3px;
			}
		}
	}

	@each $name, $color in $shine-state-colors {
		// Solid style
		&.#{$classPrefix}-portlet--solid-#{$name} {
			background: shine-get($color, base);

			.#{$classPrefix}-portlet__head {
				color: shine-get($color, inverse);
				border-bottom: 1px solid transparent;

				.#{$classPrefix}-portlet__head-title {
					color: shine-get($color, inverse);

					small {
						color: darken(shine-get($color, inverse), 6%);
					}
				}
				
				.#{$classPrefix}-portlet__head-icon {
					i {
						color: darken(shine-get($color, inverse), 6%);
					}
				}
			}

			.#{$classPrefix}-portlet__body {
				padding-top: 5px;
			}

			.#{$classPrefix}-portlet__wrapper,
			.#{$classPrefix}-portlet__body {
				color: shine-get($color, inverse);
			}

			.#{$classPrefix}-portlet__foot {
				color: shine-get($color, inverse);
				border-top: 1px solid transparent;
				background: darken(shine-get($color, base), 6%);
			}
		}

		// Tab 3x border states
		&.#{$classPrefix}-portlet--tabs-border-3x-#{$name} {
			.#{$classPrefix}-portlet__head {
				border-bottom: 3px solid rgba(shine-get($color, base), 0.1);
			}
		}

		// Bottom Border
		&.#{$classPrefix}-portlet--border-bottom-#{$name} {
			border-bottom: 3px solid rgba(shine-get($color, base), 0.2);
		}
	}

	// Sortable mode
	// jQuery UI Draggable Portlets
	&.#{$classPrefix}-portlet--sortable {
		.#{$classPrefix}-portlet__head {
			cursor: move;   
		}  
	}
			
	&.#{$classPrefix}-portlet--sortable-empty {
		visibility: hidden;
		height: 45px;  
		min-height: 125px; 
	}

	&.ui-sortable-helper {
		border: 1px dashed shine-base-color(grey, 2);
	}

	// Sticky portlet head
	.#{$classPrefix}-portlet__head  {
		transition: left 0.3s, right 0.3s, height 0.3s
	}

	&.#{$classPrefix}-portlet--sticky {
		.#{$classPrefix}-portlet__head  {
			transition: left 0.3s, right 0.3s, height 0.3s;
			position: fixed;
			box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
			z-index: 101;
			background: #fff;
		}
	}  

	// Dark skin
	&.#{$classPrefix}-portlet--skin-solid {
		// Head
		.#{$classPrefix}-portlet__head {
			.#{$classPrefix}-portlet__head-label {
				.#{$classPrefix}-portlet__head-title {
					color: #fff;

					small {
						color: rgba(#fff, 0.8);
					}
				}

				.#{$classPrefix}-portlet__head-icon {
					color: rgba(#fff, 0.8);
				}
			}   

			&:not(.#{$classPrefix}-portlet__head--noborder) {
				border-bottom: 1px solid rgba(#fff, 0.2);
			}			
		}

		// Body
		.#{$classPrefix}-portlet__body {
			color: #fff;
		}
	}

	// Spacing
	.#{$classPrefix}-portlet__space-x {
		padding-left: shine-get($shine-portlet, space, desktop) !important;
		padding-right: shine-get($shine-portlet, space, desktop) !important;
	}

	.#{$classPrefix}-portlet__space-y {
		padding-top: shine-get($shine-portlet, space, desktop) !important;
		padding-bottom: shine-get($shine-portlet, space, desktop) !important;
	}

	// Collapsed Mode
	&.#{$classPrefix}-portlet--collapsed {
		> .#{$classPrefix}-form,
		> .#{$classPrefix}-portlet__body {
			display: none; 
		}
	}

	&.#{$classPrefix}-portlet--collapsed,
	&.#{$classPrefix}-portlet--collapse {
		.#{$classPrefix}-portlet__head  {
			.#{$classPrefix}-portlet__head-toolbar {
				.la-angle-down {
					&:before {
						content: "\f113";
					}
				}

				.la-plus {
					&:before {
						content: "\f28e";
					}
				}
			}			
		}  
	}

    .#{$classPrefix}-portlet__head.#{$classPrefix}-portlet__head--fit {
    	padding: 0;
    }

    .#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit {
    	padding: 0;
    }

    .#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-top {
    	padding-top: 0 !important;
    }

    .#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-bottom {
    	padding-bottom: 0 !important;
    }
    
    .#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-x,
    .#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--hor-fit {
        padding-left: 0;
        padding-right: 0;
    }

    .#{$classPrefix}-portlet__body.#{$classPrefix}-portlet__body--fit-y {
        padding-top: 0;
        padding-bottom: 0;
    }

    .#{$classPrefix}-portlet__foot.#{$classPrefix}-portlet__foot--fit {
    	padding: 0;
    }

    &.#{$classPrefix}-portlet--space {
        padding-left: shine-get($shine-portlet, space, desktop);
        padding-right: shine-get($shine-portlet, space, desktop);

        .#{$classPrefix}-portlet__head,
        .#{$classPrefix}-portlet__body,
        .#{$classPrefix}-portlet__foot {
            padding-left: 0;
            padding-right: 0;
        }
    }

    // Options
    // No border
    &.#{$classPrefix}-portlet--head-noborder {
        .#{$classPrefix}-portlet__head {
            border-bottom: 0;
        }

        .#{$classPrefix}-portlet__body {
            padding-top: shine-get($shine-portlet, space, desktop) / 2;
        }
    }

    // Tab style
    &.#{$classPrefix}-portlet--tabs {
        .#{$classPrefix}-portlet__head {
            .#{$classPrefix}-portlet__head-toolbar {
                display: flex;
                align-items: stretch; 
            }
        }        
    }

    // Tab 3x border style
    &.#{$classPrefix}-portlet--tabs-border-3x {
        .#{$classPrefix}-portlet__head {
            border-bottom: 3px solid shine-base-color(grey, 1);

            .nav.nav-tabs {
                margin-bottom: -3px;
            }
        }
    }

    @each $name, $color in $shine-state-colors {
        // Solid style
        &.#{$classPrefix}-portlet--solid-#{$name} {
            background: shine-get($color, base);

            .#{$classPrefix}-portlet__head {
                color: shine-get($color, inverse);
                border-bottom: 1px solid transparent;

                .#{$classPrefix}-portlet__head-title {
                    color: shine-get($color, inverse);

                    small {
                        color: darken(shine-get($color, inverse), 6%);
                    }
                }
                
                .#{$classPrefix}-portlet__head-icon {
                    i {
                        color: darken(shine-get($color, inverse), 6%);
                    }
                }
            }

            .#{$classPrefix}-portlet__body {
                padding-top: 5px;
            }

            .#{$classPrefix}-portlet__wrapper,
            .#{$classPrefix}-portlet__body {
                color: shine-get($color, inverse);
            }

            .#{$classPrefix}-portlet__foot {
                color: shine-get($color, inverse);
                border-top: 1px solid transparent;
                background: darken(shine-get($color, base), 6%);
            }
        }

        // Tab 3x border states
        &.#{$classPrefix}-portlet--tabs-border-3x-#{$name} {
            .#{$classPrefix}-portlet__head {
                border-bottom: 3px solid rgba(shine-get($color, base), 0.1);
            }
        }

        // Bottom Border
        &.#{$classPrefix}-portlet--border-bottom-#{$name} {
            border-bottom: 3px solid rgba(shine-get($color, base), 0.2);
        }
    }

    // Sortable mode
    // jQuery UI Draggable Portlets
    &.#{$classPrefix}-portlet--sortable {
        .#{$classPrefix}-portlet__head {
            cursor: move;   
        }  
    }
            
    &.#{$classPrefix}-portlet--sortable-empty {
        visibility: hidden;
        height: 45px;  
        min-height: 125px; 
    }

    &.ui-sortable-helper {
        border: 1px dashed shine-base-color(grey, 2);
    }

    // Sticky portlet head
    .#{$classPrefix}-portlet__head  {
        transition: height 0.3s;
        //transition: left 0.3s, right 0.3s, height 0.3s;
    }

    &.#{$classPrefix}-portlet--sticky {
        .#{$classPrefix}-portlet__head  {
            transition: height 0.3s;
            //transition: left 0.3s, right 0.3s, height 0.3s;
            position: fixed;
            box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
            z-index: 101;
            background: #fff;
        }
    }  

    // Dark skin
    &.#{$classPrefix}-portlet--skin-solid {
        // Head
        .#{$classPrefix}-portlet__head {
            .#{$classPrefix}-portlet__head-label {
                .#{$classPrefix}-portlet__head-title {
                    color: #fff;

                    small {
                        color: rgba(#fff, 0.8);
                    }
                }

                .#{$classPrefix}-portlet__head-icon {
                    color: rgba(#fff, 0.8);
                }
            }   

            &:not(.#{$classPrefix}-portlet__head--noborder) {
                border-bottom: 1px solid rgba(#fff, 0.2);
            }            
        }

        // Body
        .#{$classPrefix}-portlet__body {
            color: #fff;
        }
    }

    // Spacing
    .#{$classPrefix}-portlet__space-x {
        padding-left: shine-get($shine-portlet, space, desktop) !important;
        padding-right: shine-get($shine-portlet, space, desktop) !important;
    }

    .#{$classPrefix}-portlet__space-y {
        padding-top: shine-get($shine-portlet, space, desktop) !important;
        padding-bottom: shine-get($shine-portlet, space, desktop) !important;
    }

    // Collapsed Mode
    &.#{$classPrefix}-portlet--collapsed {
        > .#{$classPrefix}-form,
        > .#{$classPrefix}-portlet__body {
            display: none; 
        }
    }

    &.#{$classPrefix}-portlet--collapsed,
    &.#{$classPrefix}-portlet--collapse {
        .#{$classPrefix}-portlet__head  {
            .#{$classPrefix}-portlet__head-toolbar {
                .la-angle-down {
                    &:before {
                        content: "\f113";
                    }
                }

                .la-plus {
                    &:before {
                        content: "\f28e";
                    }
                }
            }            
        }  
    }
}

// Portlet tools tooltip
.tooltip-portlet {
	opacity: 1;
}

@include shine-desktop {
	.#{$classPrefix}-portlet {
		// Fluid Height
		&.#{$classPrefix}-portlet--height-fluid {
		   	height: calc(100% - #{shine-get($shine-portlet, bottom-space, desktop)});

			.#{$classPrefix}-portlet__body {
				flex-grow: 1;
			}
		}

		// Full height portlet mode
	   	&.#{$classPrefix}-portlet--height-fluid-half {
	   		height: calc(50% - #{shine-get($shine-portlet, bottom-space, desktop)});

			.#{$classPrefix}-portlet__body {
				flex-grow: 1;
			}
		}
	}
}

@include shine-tablet-and-mobile {
	.#{$classPrefix}-portlet {
		margin-bottom: shine-get($shine-portlet, bottom-space, mobile);

		// Head sizing
		.#{$classPrefix}-portlet__head {
			padding: 0 shine-get($shine-portlet, space, mobile);
			min-height: shine-get($shine-portlet, min-height, default, mobile);
			
			&.#{$classPrefix}-portlet__head--sm {
				min-height: shine-get($shine-portlet, min-height, sm, mobile);
			}

			&.#{$classPrefix}-portlet__head--lg {
				min-height: shine-get($shine-portlet, min-height, lg, mobile);
			}

			&.#{$classPrefix}-portlet__head--xl {
				min-height: shine-get($shine-portlet, min-height, xl, mobile);
			}   
		}

		&.#{$classPrefix}-portlet--head-sm { 
			.#{$classPrefix}-portlet__head {
				min-height: shine-get($shine-portlet, min-height, sm, mobile);
			}
		}
		
		&.#{$classPrefix}-portlet--head-lg { 
			.#{$classPrefix}-portlet__head {
				min-height: shine-get($shine-portlet, min-height, lg, mobile);
			}
		}

		&.#{$classPrefix}-portlet--head-xl { 
			.#{$classPrefix}-portlet__head {
				min-height: shine-get($shine-portlet, min-height,  xl, mobile);
			}
		}

		// Portlet body alignment
		.#{$classPrefix}-portlet__body {
			padding: shine-get($shine-portlet, space, mobile);
			
			.#{$classPrefix}-portlet__body--hor-fit {
				margin-left: -(shine-get($shine-portlet, space, mobile));
				margin-right: -(shine-get($shine-portlet, space, mobile));
			}
		}

		.#{$classPrefix}-portlet__foot {
			padding: shine-get($shine-portlet, space, mobile);
		}

		// Marginless
		&.#{$classPrefix}-portlet--marginless {
			margin-bottom: 0;
		}  

		// Sticky portlet
		&.#{$classPrefix}-portlet--sticky {
			.#{$classPrefix}-portlet__head {
				height: shine-get($shine-portlet, min-height, default, mobile) - 10px;

				&.#{$classPrefix}-portlet__head--sm {
					height: shine-get($shine-portlet, min-height, sm, mobile) - 10px;
				}

				&.#{$classPrefix}-portlet__head--lg {
					height: shine-get($shine-portlet, min-height, lg, mobile) - 10px;
				}

				&.#{$classPrefix}-portlet__head--xl {
					height: shine-get($shine-portlet, min-height, xl, mobile) - 10px;
				}
			}
		}

		// Head overlay
		&.#{$classPrefix}-portlet--head-overlay {
			.#{$classPrefix}-portlet__head {
				height: shine-get($shine-portlet, min-height, default, mobile);
			}

			.#{$classPrefix}-portlet__body {
				margin-top: -(shine-get($shine-portlet, min-height, default, mobile));
			}

			// Head sizing
			&.#{$classPrefix}-portlet--head-sm {
				.#{$classPrefix}-portlet__head {
					height: shine-get($shine-portlet, min-height, sm, mobile);
				}

				.#{$classPrefix}-portlet__body {
					margin-top: -(shine-get($shine-portlet, min-height, sm, mobile));
				}
			}

			&.#{$classPrefix}-portlet--head-lg {
				.#{$classPrefix}-portlet__head {
					height: shine-get($shine-portlet, min-height, lg, mobile);
				}

				.#{$classPrefix}-portlet__body {
					margin-top: -(shine-get($shine-portlet, min-height, lg, mobile));
				}
			}

			&.#{$classPrefix}-portlet--head-xl {
				.#{$classPrefix}-portlet__head {
					height: shine-get($shine-portlet, min-height, xl, mobile);
				}

				.#{$classPrefix}-portlet__body {
					margin-top: -(shine-get($shine-portlet, min-height,xl, mobile));
				}
			}
		}

		// No border
		&.#{$classPrefix}-portlet--head--noborder {
			.#{$classPrefix}-portlet__body {
				padding-top: shine-get($shine-portlet, space, mobile) / 2;
			}
		}

		// Spacing
		.#{$classPrefix}-portlet__space-x {
			padding-left: shine-get($shine-portlet, space, mobile) !important;
			padding-right: shine-get($shine-portlet, space, mobile) !important;
		}

		.#{$classPrefix}-portlet__space-y {
			padding-top: shine-get($shine-portlet, space, mobile) !important;
			padding-bottom: shine-get($shine-portlet, space, mobile) !important;
		}
	}
}

@include shine-mobile {
	.#{$classPrefix}-portlet {
		&.#{$classPrefix}-portlet--head-break-sm {
			.#{$classPrefix}-portlet__head {
				padding-top: shine-get($shine-portlet, space, mobile);
				padding-bottom: shine-get($shine-portlet, space, mobile);
				min-height: initial !important;
				height: auto;
				flex-wrap: wrap;		  

				.#{$classPrefix}-portlet__head-label {
					margin-bottom: 1rem;
				}  
			}
		}
	} 
}