@import "../../../../frappe/frappe/public/less/variables.less";

body[data-route^="marketplace/"] {
	.layout-side-section {
		padding-top: 25px;
		padding-right: 25px;
	}

	[data-route] {
		cursor: pointer;
	}

	.layout-main-section {
		border: none;
		font-size: @text-medium;
		padding-top: 25px;

		@media (max-width: @screen-xs) {
			padding-left: 20px;
			padding-right: 20px;
		}
	}

	input, textarea {
		font-size: @text-medium;
	}

	// .btn-primary {
	// 	background-color: #89da28;
	// 	border-color: #61ca23;
	// }

	// .btn-primary:hover {
	// 	background-color: #61ca23;
	// 	border-color: #59b81c;
	// }

	.progress-bar {
		background-color: #89da28;
	}

	.subpage-title.flex {
		align-items: flex-start;
		justify-content: space-between;
	}

	.subpage-message {
		p {
			padding: 10px 15px;
			margin-top: 0px;
			margin-bottom: 15px;
			background-color: #f9fbf7;
			justify-content: space-between;
		}

		.octicon-x {
			cursor: pointer;
		}
	}

	.hub-card {
		margin-bottom: 25px;
		position: relative;
		border: 1px solid @border-color;
		border-radius: 4px;
		overflow: hidden;

		&:hover .hub-card-overlay {
			display: block;
		}

		.octicon-x {
			display: none;
			margin-left: 10px;
			font-size: 20px;
		}
	}

	.hub-card.closable {
		.octicon-x {
			display: block;
		}
	}

	.hub-card.is-local {
		&.active {
			.hub-card-header {
				background-color: #f4ffe5;
			}

			.octicon-check {
				display: inline;
			}
		}

		.octicon-check {
			display: none;
			position: absolute;
			font-size: 20px;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.hub-card-header {
		position: relative;
		padding: 12px 15px;
		height: 60px;
		border-bottom: 1px solid @border-color;
	}

	.hub-card-body {
		position: relative;
		height: 200px;
	}

	.hub-card-overlay {
		display: none;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.05);
	}

	.hub-card-overlay-body {
		position: relative;
		height: 100%;
	}

	.hub-card-overlay-button {
		position: absolute;
	}

	.hub-card-image {
		min-width: 100%;
		width: 100%;
	}

	.hub-search-container {
		margin-bottom: 20px;

		input {
			height: 32px;
		}
	}

	.hub-sidebar {
		padding-top: 25px;
		padding-right: 15px;
	}

	.hub-sidebar-group {
		margin-bottom: 10px;
	}

	.hub-sidebar-item {
		padding: 5px 8px;
		margin-bottom: 3px;
		border-radius: 4px;
		border: 1px solid transparent;

		&.active, &:hover:not(.is-title) {
			border-color: @border-color;
		}
	}

	.hub-item-image {
		border: 1px solid @border-color;
		border-radius: 4px;
		overflow: hidden;
		height: 200px;
		width: 200px;
		display: flex;
		align-items: center;
	}

	.hub-item-skeleton-image {
		border-radius: 4px;
		background-color: @light-bg;
		overflow: hidden;
		height: 200px;
		width: 200px;
	}

	.hub-skeleton {
		background-color: @light-bg;
		color: @light-bg;
		max-width: 500px;
	}

	.hub-item-seller img {
		width: 50px;
		height: 50px;
		border-radius: 4px;
		border: 1px solid @border-color;
	}

	.register-title {
		font-size: @text-regular;
	}

	.register-form {
		border: 1px solid @border-color;
		border-radius: 4px;
		padding: 15px 25px;
	}

	.empty-state {
		height: 500px;
	}

	.form-container {
		.frappe-control {
			max-width: 100% !important;
		}
	}

	.form-message {
		padding-top: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.hub-items-container {
		.hub-items-header {
			justify-content: space-between;
			align-items: baseline;
		}
	}

	.hub-item-container {
		overflow: hidden;
	}

	.hub-item-review-container {
		margin-top: calc(30vh);
	}

	.hub-item-dropdown {
		margin-top: 20px;
	}

	/* messages page */

	.message-list-item {
		display: flex;
		align-items: center;
		padding: 8px 12px;

		&:not(.active) {
			filter: grayscale(1);
			color: @text-muted;
		}

		&:hover {
			background-color: @light-bg;
		}

		.list-item-left {
			width: 30px;
			border-radius: 4px;
			overflow: hidden;
			margin-right: 15px;
		}

		.list-item-body {
			font-weight: bold;
			padding-bottom: 1px;
		}
	}

	.message-list {
		overflow: scroll;
	}

	.message-area {
		border-radius: 4px;
		justify-content: space-between;
		height: calc(100vh - 220px);
	}
}