// Addons List - admin.php?page=wpforms-addons
#wpforms-admin-addons {

	*,
	*::before,
	*::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.addons-container {
		margin-left: -20px;
		margin-right: -20px;
	}

	.unlock-msg {
		padding: 0 20px;
		margin-top: -20px;
	}

	.addon-container {
		padding: 0 20px;
		float: left;
		width: 33.333333%;

		@include media("<1250px") {
			width: 50%;
		}

		@include media("<ipad") {
			width: 100%;
		}
	}

	h4 {
		font-size: 17px;
		font-weight: 700;
	}

	.addon-item {
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 3px;
		margin: 0 0 40px 0;

		@include media("<ipad") {
			margin: 0 0
		}

		img {
			border: 1px solid #eee;
			float: left;
			max-width: 75px;
		}

		h5 {
			margin: 0 0 10px 100px;
			font-size: 16px;
		}

		p {
			margin: 0 0 0 100px;
		}

		.details {
			padding: 30px 20px;

		}

		.actions {
			background-color: #f7f7f7;
			border-top: 1px solid #ddd;
			padding: 20px;
			position: relative;

			.msg {
				background-color: #f7f7f7;
				position: absolute;
				text-align: center;
				font-weight: 600;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 99;
				padding: 20px;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				justify-content: center;

				&.success {
					color: $green;
				}

				&.error {
					color: red;
				}
			}
		}

		.status {
			float: left;
			padding-top: 8px;

			.status-inactive {
				color: red;
			}

			.status-download {
				color: #666;
			}

			.status-active {
				color: $green;
			}
		}

		.upgrade-button {
			text-align: center;

			a {
				font-weight: 600;
				width: 140px;
				text-align: center;
				padding: 8px 5px;
			}
		}

		.action-button {
			float: right;

			button {
				background: none;
				border: 1px solid #ddd;
				border-radius: 3px;
				box-shadow: none;
				cursor: pointer;
				font-weight: 600;
				width: 140px;
				text-align: center;
				padding: 8px 5px;

				&:hover,
				&.loading {
					background-color: #e9e9e9;
				}

				.fa {
					margin-right: 8px;
				}

				&.status-active {

					.fa {
						color: $green;
					}
				}

				&.status-active {

					.fa {
						color: $green;
					}
				}

				&.status-inactive {

					.fa {
						color: red;
					}
				}

				&.status-download {

					.fa {
						color: #999;
					}
				}

				&.loading {

					.fa {
						color: #666;
					}
				}
			}
		}
	}
}
