p5.js-web-editor/client/styles/components/_toolbar.scss

.toolbar__play-button {
	@extend %toolbar-button;
	margin-right: #{15 / $base-font-size}rem;
	&--selected {
		@extend %toolbar-button--selected;
	}
	& span {
		padding-left: #{2 / $base-font-size}rem;
	}
}

.toolbar__play-sketch-button {
	@extend %hidden-element;
}

.toolbar__stop-button {
	@extend %toolbar-button;
	&--selected {
		@extend %toolbar-button--selected;
	}
}

.toolbar__preferences-button {
	@extend %toolbar-button;
	line-height: #{50 / $base-font-size}rem;
	margin-left: auto;
	&--selected {
		@extend %toolbar-button--selected;
	}
}

.toolbar__logo {
	margin-right: #{30 / $base-font-size}rem;
}

.toolbar {
	padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem;
	display: flex;
	align-items: center;
}

.toolbar__project-name-container {
	border-left: 2px dashed;
	margin-left: #{10 / $base-font-size}rem;
	padding-left: #{10 / $base-font-size}rem;
	height: 70%;
  display: flex;
  align-items: center;
}

.toolbar__project-name {
	color: $light-inactive-text-color;
	cursor: pointer;
	&:hover {
		color: $light-primary-text-color;
	}
	&:focus {
		color: $light-inactive-text-color;
	}

	.toolbar__project-name-container--editing & {
		display: none;
	}
}

.toolbar__project-name-input {
	display: none;
	border: 0px;
	.toolbar__project-name-container--editing & {
		display: block;
	}
}

.toolbar__project-owner {
	margin-left: #{5 / $base-font-size}rem;
}