@import "../pages/mixins";

.topic-menu {
	lost-flex-container: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	padding: var(--gutter);

	/* centered links */
	@add-mixin from-sm {
		justify-content: center;

		& .topic-link {
			min-width: 7rem;
			justify-content: space-between;
		}
	}

	& .topic-link {
		text-align: center;
		lost-flex-container: column;
		justify-content: space-between;
		padding: 0;
		/* transitions */
		transition: transform 0.2s ease-out;

		@add-mixin for-sm {
			flex: 1 1 auto;
		}

		@add-mixin for-xs {
			max-width: 1.875rem;

			& .svg-image + span {
				@add-mixin visually-hidden;
			}
		}

		/* interactions */
		&:hover, &:focus {
			transform: scale(1.375);

			& span {
				transform:
					scale(0.825)
					translateY(-0.333em);
			}
		}

		& span {
			color: var(--white);
			text-transform: uppercase;
			/* transitions */
			transition:
				transform 0.2s ease-out,
				color 0.2s ease-out;
		}
		& .svg-image {
			opacity: 0.5;
			transition: opacity 0.2s ease;
			& svg {
				width: 1.875rem;
				height: 2.875rem;
			}
			& path,
			& line,
			& rect,
			& circle {
				fill: none;
				stroke: var(--white);
				stroke-width: 1.5;
				transition: stroke 0.2s ease-out;
			}
		}
		&:hover,
		&:focus {
			text-decoration: none;
			& span {
				color: var(--accent);
			}
			& .svg-image {
				opacity: 1;
				& path,
				& line,
				& rect,
				& circle {
					fill: none;
					stroke: var(--accent);
				}
			}
		}
	}
}
