/* =============================================================================
- Icon Box
============================================================================= */
.e-grid .gwel-icon-box {
	height: 100%;
}

.gwel-icon-box {
	&.gwel-layout-top {
		display: flex;
		flex-direction: column;
		gap: 30px;
		&.gwel-icon-left {
			align-items: flex-start;
			text-align: left;
		}
		&.gwel-icon-right {
			align-items: flex-end;
			text-align: right;
		}
		&.gwel-icon-center {
			align-items: center;
			text-align: center;
		}
	}
	&.gwel-layout-side {
		display: flex;
		align-items: var(--gwel-icon--vertical-align, flex-start);
		gap: 30px;
		&.gwel-icon-left {
			text-align: left;
		}
		&.gwel-icon-right {
			flex-direction: row-reverse;
			text-align: right;
		}
	}
	&.gwel-layout-inline {
		&.gwel-icon-left {
			text-align: left;
			.gwel-title-wrapper {
				text-align: left;
				align-items: var(--gwel-icon--vertical-align, flex-start);
			}
		}
		&.gwel-icon-right {
			text-align: right;
			.gwel-title-wrapper {
				text-align: right;
				flex-direction: row-reverse;
				align-items: var(--gwel-icon--vertical-align, flex-start);
			}
		}
	}
	.gwel-title-wrapper {
		display: flex;
		gap: 18px;
		margin-bottom: 18px;
	}
	.gwel-title {
		margin: 0;
		flex: 1;
		&.gwel-title-underline {
			span {
				position: relative;
				&:after {
					content: '';
					position: absolute;
					bottom: var(--gwel-icon-box--underline-offset, 0px);
					width: var(--gwel-icon-box--underline-w, 100%);
					height: var(--gwel-icon-box--underline-h, 2px);
					background-color: var(--gwel-icon-box--underline-c, currentColor);
					transition: background-color .3s ease, width .3s ease, height .3s ease;
					z-index: -1;
				}
			}
			&.gwel-line-left {
				span:after {
					left: 0;
				}
			}
			&.gwel-line-right {
				span:after {
					right: 0;
				}
			}
			&.gwel-line-center {
				span:after {
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.gwel-description {
		margin: 0;
	}
	.gwel-btn {
		margin-top: 30px;
		z-index: 6;
	}
	.gwel-icon {
		font-size: var(--gwel-icon--size, 60px);
	}
}