
@import 'mixins';
@import 'job-overlay';

.jm-dashboard-table {
	container-name: jm-dashboard-table;
	container-type: inline-size;
	--jm-dashboard-company-logo-size: calc(var(--jm-ui-icon-size) + 2 * var(--jm-ui-space-xs));

	&.jm-dashboard-table--large {
		container-name: jm-dashboard-table-large;
	}
}

.jm-dashboard-job, .jm-dashboard-header {
	display: flex;
	align-items: center;
	padding: var(--jm-ui-space-sm);
	gap: var(--jm-ui-space-sm);
	margin: var(--jm-ui-space-sm) 0;
	font-size: var(--jm-ui-font-size-m);
}

.jm-dashboard-header {
	color: fadeCurrentColor(85%);
	margin-bottom: unset;
	padding-bottom: unset;
}

.jm-dashboard__intro {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--jm-ui-space-sm);
}

.jm-dashboard__filters {
	font-size: var(--jm-ui-button-font-size);
}

.jm-dashboard-job {
	border: var(--jm-ui-border-size) solid var(--jm-ui-border-light);
}

.jm-dashboard-job-column {
	flex: 1 1 calc(50% - var(--jm-ui-space-sm));
	min-width: 0;
	line-height: 1.2;
	small {
		white-space: nowrap;
	}
}

.jm-dashboard-job-column.company {

	flex: 0 0 var(--jm-dashboard-company-logo-size);
	.jm-dashboard-header & {
		visibility: hidden;
	}
}

.jm-dashboard .job-status {
	text-transform: uppercase;
	font-weight: 500;
	font-size: var(--jm-ui-font-size-s);
	line-height: var(--jm-ui-icon-size-s);
	color: fadeCurrentColor( 70% );
	margin: var(--jm-ui-space-xxs) 0;

	.jm-ui-row {
		gap: var(--jm-ui-space-xxxs);
	}

	.jm-separator {
		color: fadeCurrentColor( 20% );
	}

	.jm-ui-icon {
		width: var(--jm-ui-icon-size-s);
		height: var(--jm-ui-icon-size-s);
	}
}

.jm-dashboard img.company_logo {
	width: var(--jm-dashboard-company-logo-size);
	height: var(--jm-dashboard-company-logo-size);
	object-fit: contain;
}

.jm-dashboard-job-column.actions {
	text-align: right;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--jm-ui-space-s);
}

.jm-dashboard-job-column a.job-title {
	font-weight: 600;
	font-size: var(--jm-ui-font-size);
	text-decoration: unset;
}

.jm-dashboard-job-column a.job-title:hover {
	text-decoration: underline;
}

.jm-dashboard-job-column-label {
	text-transform: uppercase;
	font-size: var(--jm-ui-font-size-s);
	font-weight: 200;
	color: fadeCurrentColor( 70% );
}

.jm-dashboard-job .jm-dashboard-job-column-label {
	display: none;
}

.jm-dashboard small {
	font-size: var(--jm-ui-font-size-s);
}

.jm-dashboard-table .job_title {
	flex: 1 1 200%;
}

.jm-dashboard-table--large .job_title {
	flex: 1 1 150%;
}

.jm-dashboard-action {
	display: block;
	text-decoration: none;
}
.jm-dashboard-action--primary {
	flex-basis: fit-content;
	white-space: nowrap;
}

.jm-dashboard-action:where(:not(:hover):not(:focus)) {
	color: inherit;
}

.jm-dashboard .job-dashboard-action-delete {
	color: var(--jm-ui-danger-color);
}

.jm-dashboard .job-manager-pagination {
	ul.page-numbers {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-size: var(--jm-ui-font-size);
		border: unset;
		gap: 12px;
	}
	li {
		min-width: 32px;
		text-align: center;
		border: 1px solid var(--jm-ui-border-light);
		border-radius: 2px;

	}
}

@mixin jm-dashboard-job-mobile {
	.jm-dashboard-job-column:where(:not(.job_title):not(.actions):not(.company)) .jm-dashboard-job-column-label  {
		display: block;
	}
	.jm-dashboard-job {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.jm-dashboard-header {
		display: none;
	}

	.jm-dashboard-job-column.actions {
		justify-content: space-between;
	}

	.jm-dashboard-job-column.company ~ .jm-dashboard-job-column.job_title {
		flex-basis: calc( 100% - var(--jm-dashboard-company-logo-size) - var(--jm-ui-space-sm) );
		order: -1;
	}

}

@container jm-dashboard-table-large (width < 940px)
{
	.jm-dashboard-job-column.job_title {
		flex-basis: 100%;
	}
}

@container jm-dashboard-table (width < 540px)
{
	@include jm-dashboard-job-mobile;
}
@container jm-dashboard-table-large (width < 780px)
{
	@include jm-dashboard-job-mobile;
}

@container jm-dashboard-table-large (540px < width < 780px)
{
	.jm-dashboard-job-column {
		flex: 1 1 calc(33% - 2 * var(--jm-ui-space-sm));
	}
}
