/**
 * Frontend Styles
 */
@import "./variables";

.ghostkit-icon-box {
	display: flex;
	flex-wrap: wrap;
	padding: var(--gkt-icon-box__padding-v) var(--gkt-icon-box__padding-h);
	border: var(--gkt-icon-box__border-width) solid var(--gkt-icon-box__border-color);
	border-radius: var(--gkt-icon-box__border-radius);

	// With link.
	&-with-link {
		position: relative;
	}

	&-link span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	// Icon.
	&-icon {
		display: flex;
		font-size: var(--gkt-icon-box--icon__font-size);
		color: var(--gkt-icon-box--icon__color);
		transition: var(--gkt-icon-box__transition-duration) color var(--gkt-icon-box__transition-easing);
	}

	&-icon ~ &-content {
		padding-left: var(--gkt-icon-box--icon__offset);
	}

	&-icon-align-right {
		order: 2;
		padding-right: 0;
	}

	&-icon-align-right ~ &-content {
		padding-right: var(--gkt-icon-box--icon__offset);
		padding-left: 0;
	}

	&-icon-align-top {
		flex: 100%;
		justify-content: center;
		padding-right: 0;
	}

	&-icon-top-align-left {
		justify-content: flex-start;
	}

	&-icon-top-align-center {
		justify-content: center;
	}

	&-icon-top-align-right {
		justify-content: flex-end;
	}

	&-icon-align-top ~ &-content {
		flex: 100%;
		padding-top: var(--gkt-icon-box--icon__offset);
		padding-left: 0;
	}

	// Content.
	&-content {
		flex: 1;
	}
}