// Set the variable defaults in case they are missing in the template
$top-background-color: #e9e9e9 !default;
$top-text-color: #666666 !default;

.g-contacts {
	.g-grid {
		margin-left: -($content-padding);
		margin-right: -($content-padding);
	}
	.g-content {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	.g-contacts-item {
		text-align: left;
		@include breakpoint(mobile-only) {
			margin-left: 0 !important;
			margin-right: 0 !important;
			display: block !important;
			&:last-child {
				margin-bottom: 0 !important;
			}
		}
	}
	&.vertical {
		.g-contacts-item {
			display: block;
		}
	}
	&.horizontal {
		.g-contacts-item {
			&:not(.g-block) {
				display: inline-block;
				margin-right: 35px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	&.style1 {
		.g-contacts-item {
			@include breakpoint(mobile-only) {
				margin-bottom: 7px;
			}			
		}
		.g-contacts-icon {
			margin-right: 5px;
		}
		&.vertical {
			.g-contacts-item {
				margin-bottom: 7px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	&.style2 {
		.g-contacts-item {
			@include breakpoint(mobile-only) {
				margin-bottom: 25px;

				&:not(.g-block) {
					.g-contacts-icon {
						margin-top: 0 !important;
					}
				}
			}
			&.g-block {
				align-self: center;
			}
		}
		&.horizontal {
			.g-contacts-item {
				&:not(.g-block) {
					.g-contacts-icon {
						margin-top: -5px;
					}
				}
			}
		}
		.g-contacts-icon {
			float: left;
			border: 2px solid $base-border-color;
			border-radius: 50%;
			font-size: 18px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			width: 45px;
			color: $accent-color-1;
			> span {
				position: relative;
				top: -1px;
			}
		}
		.g-title-value-container {
			margin-left: 60px;
		}
		.g-contact-title {
			margin-top: -5px;
			margin-bottom: 0;
		}
		&.vertical {
			.g-contacts-item {
				margin-bottom: 25px;
				&:last-child {
					margin-bottom: 0;
				}
			}			
		}
	}
}

// Top Section Adjustments
#g-top {
	.g-contacts {
		.g-contacts-item {
			display: inline-block;
			padding: 11px 15px;
			border-right: 1px solid lighten($top-background-color, 10%);
			margin-left: -4px;
			margin-bottom: 0;
			&:first-child {
				border-left: 1px solid lighten($top-background-color, 10%);
				margin-left: 0;
			}
			&:last-child {
				margin-right: 0;
			}
			> a {
				color: $top-text-color;
				&:hover {
					
				}
			}
		}
	}
}

// Offcanvas Section Adjustment
#g-offcanvas {
	.g-contacts {
		.g-contacts-item {
			margin-left: 0 !important;
			margin-right: 0 !important;
			display: block !important;
			&:last-child {
				margin-bottom: 0 !important;
			}				
		}
		&.style1 {
			.g-contacts-item {
				margin-bottom: 7px;
			}
		}
		&.style2 {
			.g-contacts-item {
				margin-bottom: 25px;
				&:not(.g-block) {
					.g-contacts-icon {
						margin-top: 0 !important;
					}
				}
			}
		}
		.g-block {
			@include flex-grow(0);
			@include flex-basis(100%);
		}
	}
}

// RTL Adjustments
[dir="rtl"] {
	#g-top {
		.g-contacts {
			.g-contacts-item {
				border-right: none;
				border-left: 1px solid lighten($top-background-color, 10%);
				&:first-child {
					border-right: 1px solid lighten($top-background-color, 10%);
				}
			}
		}
	}

	.g-contacts {
		.g-contacts-item {
			text-align: right;
		}
		&.horizontal {
			.g-contacts-item {
				&:not(.g-block) {
					display: inline-block;
					margin-left: 35px;
					margin-right: 0;
					&:last-child {
						margin-left: 0;
					}
				}
			}
		}
		&.style1 {
			.g-contacts-icon {
				margin-left: 5px;
				margin-right: 0;
			}
		}
		&.style2 {
			.g-contacts-icon {
				float: right;
			}
			.g-title-value-container {
				margin-right: 60px;
				margin-left: 0;
			}
		}
	}
}