#document-editor-container {
	.dbqde-topics-container {
		nav {
			background-color: $document-editor-toolbar-background-color;
			border-bottom: 1px solid $global-border-color;
		}

		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: $margin-default;

			> li {
				//float: left;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 5px;
				padding: 0px 10px;
				border-radius: 15px;

				> a {
					color: $text-color-default;
					line-height: 35px;

					&::before {
						content: attr(data-text);
						font-weight: bold;
						visibility: hidden;
						height: 0;
						overflow: hidden;
						display: block;
					}
				}

				.dbqde-function-button {
					opacity: 1;
					outline: none;
					padding: 0;

					&.disabled {
						opacity: 1 !important;
						background: $modal-disabled-color;
						border-color: $modal-disabled-color;
					}
				}

				&.disabled {
					pointer-events: none;
					opacity: .65 !important;
				}

				&.dbqde-topic {
					.dbqde-function-button {
						opacity: 1;
						background: transparent;
						border: none;
						
						i {
							color: $text-color-default;
						}

						svg {
							fill: $text-color-default;
						}
					}

					&.active, &:hover {
						font-weight: $font-weight-bold;
						background: $color-subtle;

						a {
							color: $color-primary;
						}

						.dbqde-function-button {							
							i {
								color: $color-primary;
							}

							svg {
								fill: $color-primary;
							}

							&:hover {
								background: rgba(255,255,255,0.4); // TO-DO: create variable and add one for dark mode
							}
						}
					}
				}

				&[data-is-add-button="true"] {
					svg {
						fill: $color-white;
					}
				}
			}
		}

		.dbqde-function-button {
			//margin-right: 5px;
			//margin-top: 5px;
		}

		.dbqde-topic {
			a {
				text-decoration: none;
			}

			.dropdown-menu {
				a {
					i {
						margin-right: 5px;
					}
				}
			}
		}
	}

	.topic-function-button-options {
		//opacity: 0;
	}

	&:not([data-document-version-state="0"]) {
		.dbqde-function-button:not(.version-function-button):not(.dbqde-document-tags-function-button):not(.dbqde-function-button-toolbar) {
			display: none; // Hide button to decrease tab size
		}
	}
}