@import "variables";

.sgpb {
	&-cubes {
		width: 40px;
		height: 40px;
		align-content: center;
		position: relative;
		display: flex;
		z-index: 9;
		flex-wrap: wrap;

		&-mini {
			width: 15px;
			height: 15px;
			background: $white;
			margin: 2px;
			border-radius: 2px;

			&_little {
				width: 13px;
				height: 13px;
			}
		}
	}

	&-box {
		height: 90px;
		display: flex;
		align-items: center;
		box-shadow: 0 0 20px $black_opacity_20;
		border-radius: 18px;
		cursor: pointer;
		background: $white;
		color: $black;
		flex: 0 0 23%;
		margin: 0 1%;
		&-img {
			width: 90px;
			height: 90px;
			border-radius: 18px;
			position: relative;
			margin-right: 22px;
			transition: 0.4s;
		}

		&-text {
			font: Bold 20px/24px Segoe UI Regular !important;
		}

		&-plus {
			font-weight: bolder;
			position: absolute;
			right: -3%;
			bottom: -13%;
			border-radius: 50%;
			transition: visibility 0s, opacity 0.3s linear;
			opacity: 0;
			font-family: "Glyphter", Arial, Helvetica, sans-serif;
			font-size: 20px;
			color: #fff;
			width: 45px;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $blue 0 0 no-repeat padding-box;
			box-shadow: 0 0 15px $blue_opacity_3;
			margin-left: 11px;
		}
		&-default {
			background: $light;

			img {
				background: $white;
			}
		}

		&-active {
			img {
				background: $blue;
			}
		}

		&:hover {
			img {
				transform: translate(-23px, -23px);
				box-shadow: 0 0 20px $black_opacity_20;
			}
			.sgpb-box-plus {
				opacity: 1;
			}
		}
	}

	&-addPopup, &-pro-extensions {
		flex-wrap: wrap;
	}
}