/* Settings Screen
------------------------------------------------------------------------------*/

.satispress-screen {
	display: flex;
	flex-wrap: nowrap;
}

.satispress-screen-content {
	width: 100%;
}

.js .satispress-tab-panel {
	display: none;
	margin-top: 1em;
}

.satispress-tab-panel.is-active {
	display: block;
}

.satispress-field-error {
	color: #ff0000;
}

.satispress-composer-snippet {
	background: #333;
	color: #fff;
	line-height: 1.2;
	padding: 10px;
}

.satispress-composer-snippet code {
	background: transparent;
}

.satispress-screen-sidebar {
	background: #fff;
	color: #1e1e1e;
	display: none;
	flex: 0 0 350px;
	overflow-y: scroll;
	position: fixed;
	top: 32px;
	right: 0;
	bottom: 0;
	width: 350px;
	z-index: 10;
}

.satispress-screen-sidebar .components-panel__header {
	background: #fff;
	border-top-width: 0;
	padding-right: 4px;
	position: sticky;
	top: 0;
	z-index: 2;
}

.satispress-screen-sidebar .components-tab-panel__tabs {
	background: #fff;
	border-bottom: 1px solid #ddd;
	position: sticky;
	top: 49px;
	z-index: 1;
}

.satispress-screen-sidebar .components-tab-panel__tab-content {
	padding: 16px;
}

.satispress-screen-sidebar .components-tab-panel__tab-content > :first-child {
	margin-top: 0;
}

.sidebar-is-open .satispress-screen-content {
	margin-right: 370px;
}

.sidebar-is-open .satispress-screen-sidebar {
	display: block;
}


/* Repository Tab
----------------------------------------------------------------------------- */

.satispress-repository .components-placeholder {
	max-width: 720px;
}

.satispress-repository > .components-button.is-pressed {
	padding-right: 12px;
}

.satispress-repository .components-placeholder {
	box-shadow: inset 0 0 0 1px #ccd0d4;
}

.satispress-package {
	margin-top: 20px;
}

.satispress-package thead .components-button {
	float: right;
}

.satispress-package tbody th,
.satispress-package tbody td {
	word-break: break-all;
}

.satispress-package tbody th {
	font-size: 13px;
	width: 150px;
}

.satispress-release.button {
	line-height: 22px;
	height: 24px;
	margin-bottom: 3px;
	margin-top: 3px;
	padding-left: 6px;
	padding-right: 6px;
}

.satispress-release-actions {
	background: #f9f9f9;
	border: 1px solid #dedede;
	margin-top: 1em;
}

.satispress-release-actions td,
.satispress-release-actions th {
	padding: 5px 10px;
}

.satispress-release-actions tbody th {
	width: auto;
}

.satispress-release-actions tr:first-child td,
.satispress-release-actions tr:first-child th {
	padding-top: 8px;
}

.satispress-release-actions tr:last-child td,
.satispress-release-actions tr:last-child th {
	padding-bottom: 10px;
}

.satispress-release-actions .components-base-control {
	width: 35em;
}

.satispress-release-actions .components-base-control__field {
	margin-bottom: 1px;
}

.satispress-release-actions .components-text-control__input {
	background: #fff;
	max-width: 100%;
	width: 35em;
}

@media screen and ( max-width: 782px ) {
	.satispress-release.button {
		line-height: normal;
		height: auto;
	}
}


/* API Keys Table
----------------------------------------------------------------------------- */

.satispress-api-key-table {
	margin: 1em 0;
}

.satispress-api-key-table td,
.satispress-api-key-table th {
	width: auto;
}

.satispress-api-key-table tbody td,
.satispress-api-key-table tbody th {
	vertical-align: middle;
}

.satispress-api-key-table tfoot td {
	background-color: #f9f9f9;
}

.satispress-api-key-table tfoot td input {
	margin-left: 0;
	padding: 0 6px;
	width: 20em;
}

.satispress-api-key-table tfoot td label {
	display: inline-block;
	line-height: 1;
}

.satispress-api-key-table tfoot td .spinner {
	float: none;
}

.satispress-api-key-table .column-actions {
	text-align: right;
}

.satispress-api-key-table .column-token input {
	font-family: monospace;
	max-width: 282px;
}

.screen-profile .satispress-api-key-table .column-user,
.screen-user-edit .satispress-api-key-table .column-user,
.network-admin.profile-php .satispress-api-key-table .column-user,
.network-admin.user-edit-php .satispress-api-key-table .column-user {
	display: none;
}

.satispress-api-key-form .components-base-control {
	width: 25em;
}

.satispress-api-key-form .components-base-control__field {
	margin-bottom: 1px;
}

.satispress-api-key-form .components-text-control__input {
	height: 36px;
}

/* Composer Tab
----------------------------------------------------------------------------- */

input.satispress-cli-field {
	background: #f6f6f6;
	font-family: monospace;
	max-width: 720px;
}
