@import 'node_modules/@wordpress/base-styles/breakpoints';
@import 'node_modules/@wordpress/base-styles/mixins';

.github-deployments-repositories {
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: $font-body-small;

	&__search-bar {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 16px;

		@include break-small {
			flex-direction: row;
			gap: 16px;
		}

		.select-dropdown__container {
			width: 100%;

			@include break-small {
				width: auto;
			}
		}
	}

	.components-spinner {
		margin-left: auto;
		margin-right: auto;
		padding: 32px 24px;
	}

	&__no-results {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 64px auto;
		text-align: center;
		p:first-child {
			font-weight: 500;
			margin-bottom: 8px;
		}
		a.is-primary {
			svg {
				margin-left: 4px;
			}
		}
	}
}

.github-repositories-list {
	&-permissions-notice {
		margin-top: auto;
	}

	.pagination {
		margin-top: auto;

		+ .github-repositories-list-permissions-notice {
			margin-top: initial;
		}
	}

	display: flex;
	flex-direction: column;
	flex: 1;
}

.github-deployments-repository-list-table {
	border-collapse: collapse;
	margin-bottom: 16px;

	th,
	td {
		padding: 8px 0;
		font-weight: normal;
	}

	th:first-child {
		width: 285px;
	}

	thead tr,
	tbody tr:not(:last-of-type) {
		border-bottom: 1px solid var(--color-border-subtle);
	}

	td {
		vertical-align: middle !important;
	}

	tr th {
		font-weight: 500;
		color: var(--studio-gray-60);
	}

	tr td:last-child {
		text-align: right;
	}

	&__repo-name {
		color: inherit !important;

		&:hover {
			text-decoration: underline;
		}
	}
}
