/* Guestbook Tweaks: the "Write something" box at the top of a guestbook */

/* Sits like one more guestbook row: no frame of its own, just cBB's row divider in
   --wall-border-color, which Profile Styler sets from the profile being viewed */
.gb-compose {
	margin: 0;
	border-bottom: 1px solid var(--wall-border-color, rgba(128, 128, 128, 0.4));
}

.gb-compose-link,
.gb-compose-link:hover,
.gb-compose-link:focus {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	text-decoration: none !important;
	cursor: text;
}

.gb-compose-avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	overflow: hidden;
}

.gb-compose-avatar img {
	display: block;
	width: 40px !important;
	height: 40px !important;
	object-fit: cover;
}

/* Looks like a text box, so it reads as "type here". It and the button use cBB Follower's
   own box/button classes, so Profile Styler colours them like the rest of the profile */
.gb-compose-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border-radius: 0;
	font-size: 1.15em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Specific enough to beat cBB's ".dark-theme .cbb-btn" grey: the text takes the
   profile's link colour, like cBB's own search button next to it */
.gb-compose-link .cbb-btn.gb-compose-button {
	flex: 0 0 auto;
	border-radius: 0;
	color: inherit;
	font-size: 12px;
	line-height: 30px;
	cursor: pointer;
}

/* Once the box is in place, the small button above the banner isn't needed */
.gb-compose-moved .wall-top-buttons > .fwbutton[data-action="add-comment"] {
	display: none;
}

@media (max-width: 550px) {
	.gb-compose-link {
		gap: 8px;
		padding: 8px;
	}

	.gb-compose-avatar {
		display: none;
	}

	.gb-compose-field {
		font-size: 1em;
	}
}