@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;
@use '../../base/layout' as *;

.brandui-footer {
	@extend .brandui-section;

	padding: var(--padding-large);
	padding-top: var(--padding-huge);

	.footer {
		&-content {
			display: grid;
			gap: var(--padding-large);

			// If the footer does not have the navigation links
			&:not(:has(.footer-navigation)) {
				.footer-info {
					border: none;
					padding-top: 0;
				}
			}
		}

		&-navigation,
		&-info,
		&-legal {
			display: flex;
			gap: var(--padding-large);
			justify-content: space-between;

			@include break.max-mobile {
				flex-wrap: wrap;
			}
		}

		&-info,
		&-legal {
			border-width: 0;
			border-top-width: 0.0625rem;
			border-style: solid;
			padding-top: var(--padding-medium);
			border-color: with-opacity(var(--ui-stroke), 50);
		}

		&-column {
			width: 100%;

			&-title {
				margin-bottom: var(--padding-small);
				color: var(--ui-text);
			}
		}

		&-links {
			display: flex;
			flex-direction: column;
			gap: var(--padding-extra-small);

			li {
				list-style: none;
			}

			a {
				font-weight: 400;
				text-decoration: none;
				display: block;
				color: var(--ui-body);

				&:hover {
					text-decoration: underline;
					color: var(--action);
				}
			}

			@include break.max-mobile {
				li a {
					padding: var(--padding-extra-small) 0;
				}
			}
		}

		&-legal {
			font-size: 0.875rem;
			color: var(--ui-body);

			&-links {
				display: flex;
				gap: var(--padding-extra-small);

				li {
					list-style: none;

					// Add a separator dot inbetween the list items
					& + li::before {
						content: '•';
						padding-right: var(--padding-extra-small);
					}
				}

				a {
					font-weight: 400;
					text-decoration: none;
					color: var(--ui-body);

					&:hover {
						text-decoration: underline;
						color: var(--action);
					}
				}

				@include break.max-mobile {
					flex-wrap: wrap;
				}
			}
		}

		&-social-links {
			display: flex;
			gap: var(--padding-extra-small);
			color: var(--ui-text);

			li {
				list-style: none;
			}

			.icon-border {
				border-color: with-opacity(var(--ui-accent), 70);
			}

			a {
				font-weight: 400;
				text-decoration: none;
				color: var(--ui-text);

				&:hover {
					color: var(--action);
				}
			}
		}
	}

	@include break.max-mobile {
		padding: var(--padding-small);
		padding-top: var(--padding-huge);
	}
}