@import "../../variables";

.manage-sub-users {

	&-header {
		background: $lightest-grey;
		display: flex;
		align-items: center;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		padding: 10px 20px;
	}

	&-title {
		flex: 1;
		color: $medium-grey;
		margin: 0;
		font-weight: normal;
		font-size: 20px;
	}

	&-sidephrase {
		margin: 0;
	}

	&-icon {
		margin: auto;
	}

	.sortable-table {
		background: $white;
		position: relative;
		width: 100%;

		&-row {
			&--loading {
				color: #ccc;
			}
		}

		&-header-cell, &-cell {
			padding: 10px;
			text-align: left;
			white-space: nowrap;
		}

		&-header-cell {
			text-transform: uppercase;
			font-size: 10px;
			color: $medium-grey;
			font-weight: 600;
			cursor: pointer;

			&-sort-asc::after, &-sort-desc::after {
				content: ' ';
				height: 10px;
				width: 10px;
				display: inline-block;
				background: $medium-grey;
				mask: url('../../../images/arrow-sorting.svg') no-repeat 50% 50%/10px 10px;
				-webkit-mask: url('../../../images/arrow-sorting.svg') no-repeat 50% 50%/10px 10px;
				vertical-align: text-top;
				margin: 0 5px;
			}

			&-sort-asc::after {
				transform: rotate(180deg);
			}
		}

		&-cell {
			width: 30%; // <table> "hack"
			font-weight: normal;
		}

		&-caption {
			position: absolute;
			font-size: 10px;
			color: $medium-grey;
			font-weight: 600;
			right: 0;
			top: 0;
			padding: 10px;
			text-align: right;

			a {
				color: $green;
			}
		}

		&-status, &-actions {
			text-align: center;
			width: 15%; // <table> "hack"
		}

		&-warning-message {
			padding: 5px;
			background-color: lighten($orange, 10%);
			border: 1px solid darken($orange, 5%);
			color: darken($orange, 20%);
			text-align: center;
			border-left: none;
			border-right: none;
		}

		&-cell-filter {
			font-weight: 700;
		}

		&-add-user-form, &-create-user-form {
			background: $lightest-grey;
			text-align: center;
			border-top: 1px solid $light-grey;
			border-bottom: 1px solid $light-grey;

			td {
				padding: 5px;
				white-space: nowrap;
			}

			&-email {
				width: 100%;
				border: 1px solid $light-grey;
				padding: 10px;
				margin: 0;
				border-radius: 3px;

				&:focus {
					outline: none;
				}

				&::placeholder {
					color: $light-grey;
				}
			}

			&-name {
				width: 100px;
				border: 1px solid $light-grey;
				padding: 10px;
				margin: 0;
				border-radius: 3px;
				flex: 1;

				&:first-child {
					margin-right: 10px;
				}

				&:focus {
					outline: none;
				}

				&::placeholder {
					color: $light-grey;
				}
			}
		}
	}
}
