@import "theme.scss";

/* Contexts */

.context {
    position: fixed;

	.menu {
		min-width: 180px;
		box-sizing: border-box;
		font-size: 14px;
		background-color: $background-floating;
		color: $text-normal;
		padding: 8px;
		border-radius: 4px;

		.item-spacer {
			background-color: $background-secondary;
			height: 1;
			margin: 6px 0;
		}

		.item {
			padding: 8px;
			border-radius: 2px;
			cursor: pointer;
			display: flex;
			align-items: center;
		}

		.item:hover {
			color: $header-primary;
			background-color: $brand-hover;
		}

		.item.red {
			color: $item-red;
			font-weight: 600;
		}

		.item.red:hover {
			color: $header-primary;
			background-color: $item-red;
		}

		.item .icon {
			margin-right: 8px;
		}

		.guild-title-context .item .icon img,
		.guild-title-context .item .icon svg {
			width: 16px;
			height: 16px;
		}

		.member-context .item {
			display: flex;
			align-items: center;
			line-height: 1;
		}

		.member-context .item .icon img,
		.member-context .item .icon svg {
			width: 10px;
			height: 10px;
		}

		.member-context .item .status-circle {
			width: 10px;
			height: 10px;
			border-radius: 5px;
			margin-right: 8px;
		}

		.member-context .item .status-text {
			text-transform: capitalize;
		}
	}

	.above,
	.below {
		display: flex;
		flex-flow: column;
		align-items: center;
		color: $background-floating; /* for the tab */
	}

	.above .content,
	.below .content {
		color: $header-primary;
		background-color: $background-floating;
		padding: 8px;
		border-radius: 4px;
	}

	.info {
		display: flex;
		align-items: center;
		color: $background-floating; /* for the tab */

		.content {
			background-color: $background-floating;
			color: $header-primary;
			padding: 12px;
			border-radius: 4px;
		}

		.content.guild {
			line-height: 1;

			.name:not(:last-child) {
				margin-bottom: 4px;
			}

			.connection {
				display: flex;
				align-items: center;
			}

			.connection .status-circle {
				width: 10px;
				height: 10px;
				border-radius: 5px;
				margin-right: 4px;
			}

			.connection .display-name {
				font-size: 12px;
			}
		}
	}
}