.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-owner { margin-left: #{5 / $base-font-size}rem; }