.fm-repeatable
{
	> .fm-repeatable-layout,
	> .fm-repeatable-item
	{
		@include border-box();
		
		background: $color-sub-gray;
		position: relative;
		overflow: hidden;
		
		@include bp(above-absolute-admin-bar)
		{
			padding: 1px 28px 0;
		}
		
		@include bp(up-to-absolute-admin-bar)
		{
			padding: 28px 1px 0;
		}
		
		> div
		{
			background: $color-light-gray;
		}
		
		&:nth-child(odd) > div
		{
			background: $color-white;
		}
	}
		
	> .fm-repeatable-item
	{
		> a,
		> a span
		{
			@include transition(all);
			
			color: $color-wp-dark-gray;
			cursor: pointer;
			display: block;
			height: 28px;
			line-height: 28px;
			text-align: center;
			width: 28px;
		}
		
		> .fm-repeatable-move
		{
			cursor: move;
			left: 0;
			position: absolute;
			top: 0;
			
			&:hover
			{
				background: $color-sub-dark-gray;
			}
			
			span
			{
				cursor: move;

				&.fm-repeatable-count
				{
					background: $color-sub-dark-gray;
					font-size: 12px;
					letter-spacing: -1px;
				}
			}
		}
		
		&.ui-sortable-helper > .fm-repeatable-move
		{
			background: $color-sub-dark-gray;
		}
		
		> .fm-repeatable-button,
		> a .fm-repeatable-button
		{
			background: rgba($color-sub-dark-gray, 0);
			opacity: 0;
			position: absolute;
			
			&:hover
			{
				background: $color-sub-dark-gray;
			}
		}
		
		&:hover > .fm-repeatable-button,
		&:hover > a .fm-repeatable-button
		{
			opacity: 1;
		}
		
		> .fm-repeatable-insert
		{
			z-index: 1;
			
			span
			{
				line-height: 32px;
			}
		}
		
		&:first-child > .fm-repeatable-move-up,
		&:nth-last-child(3) > .fm-repeatable-move-down
		{
			display: none;
		}
		
		@include bp(above-absolute-admin-bar)
		{
			> .fm-repeatable-move
			{
				height: 100%;
				
				.fm-repeatable-button
				{
					left: 0;
					position: absolute;
					top: 50%;
				}
			}
			
			> .fm-repeatable-move-up,
			> .fm-repeatable-move-up span,
			> .fm-repeatable-move-down,
			> .fm-repeatable-move-down span
			{
				font-size: 10px;
				height: 14px;
				line-height: 14px;
				width: 14px;
			}
			
			> .fm-repeatable-move-up,
			> .fm-repeatable-move-down
			{
				&:hover,
				&:hover span
				{
					font-size: 20px;
					height: 28px;
					line-height: 28px;
					width: 28px;
				}
			}

			> .fm-repeatable-move-up
			{
				left: 28px;
				top: 0;
			}

			> .fm-repeatable-move-down
			{
				bottom: 0;
				left: 28px;
			}

			> .fm-repeatable-insert
			{
				right: 0;
				top: 0;
			}

			> .fm-repeatable-remove
			{
				right: 0;
				top: 50%;
			}
		}
		
		@include bp(up-to-absolute-admin-bar)
		{
			> .fm-repeatable-move
			{
				height: 28px;
				
				.fm-repeatable-button
				{
					display: none;
				}
			}
			
			> .fm-repeatable-move-up
			{
				left: 28px;
				top: 0;
			}

			> .fm-repeatable-move-down
			{
				left: 56px;
				top: 0;
			}

			> .fm-repeatable-insert
			{
				left: 50%;
				margin-left: -14px;
				top: 0;
			}

			> .fm-repeatable-remove
			{
				right: 0;
				top: 0;
			}
		}
	}
	
	&.fm-has-layout > .fm-repeatable-item:nth-child(2) > .fm-repeatable-move-up,
	{
		display: none;
	}
	
	&.ui-sortable-disabled > .fm-repeatable-item > .fm-repeatable-move
	{
		cursor: default;

		&:hover
		{
			background: none;
		}
		
		.fm-repeatable-count
		{
			cursor: default;
		}
		
		.fm-repeatable-button
		{
			display: none;
		}
	}
	
	> .fm-repeatable-placeholder
	{
		background: $color-sub-gray;
	}
	
	> .fm-repeatable-template
	{
		display: none;
	}
	
	> .fm-repeatable-add
	{
		background: $color-sub-light-gray;
		border: 1px solid $color-sub-gray;
		padding: 12px;
		
		@include bp(above-absolute-admin-bar)
		{
			border-left-width: 28px;
			border-right-width: 28px;
		}
	}
}

body.rtl .fm-repeatable > .fm-repeatable-item
{
	> .fm-repeatable-move
	{
		left: auto;
		right: 0;
	}
	
	@include bp(above-absolute-admin-bar)
	{
		> .fm-repeatable-move-up,
		> .fm-repeatable-move-down
		{
			left: auto;
			right: 28px;
		}
		
		> .fm-repeatable-insert,
		> .fm-repeatable-remove
		{
			left: 0;
			right: auto;
		}
	}
	
	@include bp(up-to-absolute-admin-bar)
	{
		> .fm-repeatable-move-up
		{
			left: auto;
			right: 28px;
		}
		
		> .fm-repeatable-move-down
		{
			left: auto;
			right: 56px;
		}
		
		> .fm-repeatable-remove
		{
			left: 0;
			right: auto;
		}
	}
}