// ==================================================================
// Variables
// ==================================================================

color-wp-link       = #0073aa
color-wp-link-hover = #0096dd


// ==================================================================
// Admin pages tabs
// ==================================================================

.su-admin-tabs
	margin-bottom 22px


// ==================================================================
// Available shortcodes screen
// ==================================================================

.su-admin-shortcodes

	.wp-filter
		padding-left 20px

	&-list

		&-not-found
			margin 0
			padding 100px 0
			text-align center
			color #666
			font-size 18px
			font-style normal

		&-item
			float left
			width 150px
			margin 0 22px 22px 0
			text-decoration none

			&-image
				display block
				width 120px
				height 120px
				padding 15px
				background white
				transition box-shadow .2s ease

			&:hover
				.su-admin-shortcodes-list-item-image
					box-shadow 0 0 0 4px rgba(color-wp-link-hover, 20%), 0 0 0 1px color-wp-link-hover

			&-title
				display block
				height 18px
				margin 8px 0
				line-height 18px
				overflow hidden
				text-align center
				text-transform capitalize

	&-single
		padding-top 20px

		&-section
			max-width 840px
			margin-bottom 30px

		&-back span
			font-size 1.25em
			margin-right .3em
			vertical-align middle

		&-description
			overflow hidden

			> span
				float left
				display block
				width 60px
				height 60px
				margin 0 1.3em 0 0
				padding 10px
				background white

			h2
				height 20px
				margin 5px 0 10px
				font-size 1.3em
				line-height 20px

			p
				display block
				height 40px
				margin 0
				overflow hidden
				font-size 13px
				line-height 20px

		&-preview

			&-content
				background white
				padding 2em

				& :first-child
					margin-top 0 !important
				& :last-child
					margin-bottom 0 !important

			.su-column
				outline 1px dotted #ccc

		&-code

			pre code
				display block
				padding 1em

		&-options
			&-table + &-table
				margin-top 20px


// ==================================================================
// Add-ons screen
// ==================================================================

.su-admin-addons

	&-list
		padding-top 12px

	&-item
		float left
		width 280px
		margin 0 22px 22px 0
		background white
		background linear-gradient(to bottom, #f5f5f5, white 20%, white 80%, #f5f5f5)
		overflow hidden
		border-radius 5px
		text-decoration none
		box-shadow 0 1px 2px rgba(0, 0, 0, .1)
		transition all .2s ease

		&:hover
			box-shadow 0 0 12px rgba(0, 0, 0, .15)
			transform scale(1.03)

		&-image
			display block
			width 280px
			height 120px
			margin 0
			padding 0
			border none
			border-top-right-radius 4px
			border-top-left-radius 4px

		&-info
		&-title
		&-description
			display block

		&-info
			padding 20px

		&-title
			height 16px
			margin-bottom 16px
			line-height 16px
			font-size 16px
			color #0073aa

		&-description
			height 60px
			margin-bottom 16px
			line-height 20px
			overflow hidden
			font-size 12px
			color #777

		&-button
			font-size 12px