.workspace-container-wrapper {
	background-color: white;
	height: 100%;
	color: #172b4d;
	overflow-y: scroll;

	.workspace-container {
		margin: 40px 20px 40px;
		display: flex;
		justify-content: center;
		align-items: center;

		.boards-wrapper {
			width: 100%;
			max-width: 1000px;
			min-width: 288px;
			display: flex;
			flex-direction: column;
			.starred-boards {
				margin-bottom: 40px;
				display: flex;
				flex-direction: column;
				.preview-title {
					display: flex;
					align-items: center;
					flex-direction: row;
					color: #172b4d;
					font-size: 16px;
					font-weight: 700;
					margin-inline-start: 5px;
					margin-top: 6px;
					margin-bottom: 11px;

					.board-star-btn-icon {
						// color: gold;
						padding: 6px;
						&::before {
							content: '\e966';
						}
					}
				}
			}
			.workspaces-boards {
				.preview-title {
					display: flex;
					align-items: center;
					flex-direction: row;
					color: #172b4d;
					font-size: 16px;
					font-weight: 700;
					margin-inline-start: 5px;
					margin-top: 6px;
					margin-bottom: 11px;

					.board-menu-navigation-item-link-icon {
						padding: 6px;
						&::before {
							content: '\e90b';
						}
					}
				}
			}
		}
	}
}

.board-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
	grid-auto-rows: 140px;
	grid-gap: 16px;
	gap: 16px;

	.board-link {
		text-decoration: none;
		color: inherit;

		.board-preview {
			cursor: pointer;
			height: 100%;
			border-radius: 3px;
			.board-preview-details {
				position: relative;
				padding: 10px;
				height: 100%;
				h3 {
					font-size: 16px;
					color: #fff;
					z-index: 20;
					opacity: 1;
					line-height: 20px;
					font-weight: 700;
					word-wrap: break-word;
					overflow: hidden;
				}
				.board-star-btn-icon {
					position: absolute;
					bottom: 10px;
					right: 10px;
					color: #fff;
					transition: color 0.2s ease-in-out, 0.2s ease-in-out;
					transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
					transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, 0.2s ease-in-out;
					&.is-on {
						color: #e6c60d;
					}
					&::before {
						content: '\e966';
					}
					&:hover {
						transform: scale(1.2);
						color: rgba(255, 227, 68, 0.9);
					}
				}
			}
		}
	}
}

.add-board-section {
	background-color: rgb(192, 192, 192);
	display: grid;
	align-items: center;
	cursor: pointer;
	.add-board-input-closed {
		margin: auto;
		position: relative;
	}

	.add-board-form-section {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		padding: 10px;

		.add-board-input {
			background-color: #fff;
			display: block;
			transition: margin 85ms ease-in, background 85ms ease-in;
			width: 100%;
			min-height: 16px;
			border: 2px solid #0079bf;
			cursor: text;
			text-decoration: none;
			font-family: unset;
			overflow: hidden;
			overflow-wrap: break-word;
			resize: none;
			color: #172b4d;
			padding: 8px;
			border-radius: 3px;
			margin: 4px 0px;

			&:focus {
				background-color: white;
				border: 2px solid #0079bf;
				outline: 0 none;
				cursor: text;
			}
		}

		.add-board-control-section {
			margin: 0;

			.add-board-confirm-btn {
				@include button-add-primary;
			}
			.icon-close {
				color: black;
				position: relative;
				vertical-align: middle;
				&::before {
					content: '\e91c';
				}
			}
		}
	}
}

//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// .workspace-container {
//    min-height: 100vh;
//    background-color: white;
//    .workspace-side-nav {
//       position: sticky;
//       top: 0px;
//       .workspace-left-sidebar-container {
//          min-height: 100vh;
//          margin: 40px 0 0;
//          padding: 0 16px;
//          width: 240px;
//          .workspace-main-btns {
//             li {
//                margin-bottom: 4px;
//                > * {
//                   cursor: pointer;
//                   align-items: center;
//                   background-color: transparent;
//                   border-radius: 4px;
//                   // Box-shadow needed ?
//                   box-shadow: none;
//                   display: flex;
//                   font-weight: bold;
//                   margin: 0;
//                   min-height: 20px;
//                   overflow: hidden;
//                   padding: 6px 8px 6px 0;
//                   text-decoration: none;
//                   transition-property: background-color, border-color, box-shadow;
//                   transition-duration: 85ms;
//                   transition-timing-function: ease;
//                   &:hover {
//                      background-color: rgba(9, 30, 66, 0.08);
//                   }
//                   &:active {
//                      background-color: rgba(9, 30, 66, 0.13);
//                   }
//                }
//             }
//             > * {
//                background-color: rgb(252, 143, 143);
//             }
//             // NOT WORKING, WHY ?
//             &:last-child {
//                margin-bottom: 12px;
//             }
//          }
//       }
//    }
// }
