@use "@gloria/layout/_mixins.scss" as *;

.api-item-heading {
	display: flex;
	justify-content: space-between;
	align-items: baseline;

	@include mobile {
		display: block;
	}

	> * {
		@include mobile {
			margin-bottom: var(--spacing-3);
		}
	}

	&__code {
		font-family: var(--font-family-monospace);
		font-weight: var(--font-weight-regular);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-md);
		color: var(--color-text-primary);
		min-height: 26px; // tag height.
		align-content: center;

		@include mobile {
			display: block;
			width: 100%;
			margin-bottom: var(--spacing-3);
		}

		a.doc.b-link {
			text-decoration: none;
		}
	}

	&__dev-names {
		display: block;
		margin-top: var(--spacing-1);
		font-family: var(--font-family-monospace);
		font-weight: var(--font-weight-regular);
		font-size: var(--font-size-xs);
		line-height: var(--line-height-md);
		color: var(--color-text-secondary);

		code {
			display: block;
			cursor: default;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			direction: rtl;
			text-align: left;
			width: 100%;
		}
	}
}
