/* ==========================================================================
   Accordion shortcode styles
   ========================================================================== */

.qodef-accordion.qodef-layout--simple {
	
	.qodef-accordion-title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 12px 0 0;
		padding: 2px 10px 2px 5px;
		transition: color .2s ease-out, background-color .2s ease-out;
		cursor: pointer;
		
		&:first-child {
			margin-top: 0;
		}
		
		.qodef-accordion-mark {
			position: relative;
			flex-shrink: 0;
			width: 20px;
			height: 18px;
			line-height: 1;
			text-align: center;

			span {
				position: absolute;
				display: block;
				width: 100%;
				top: 50%;
				transform: translateY(-50%);
				transition: opacity .2s ease-out;
				
				&:before {
					display: block;
					line-height: inherit;
				}
				
				&.qodef-icon--minus {
					opacity: 0;
				}
				
				&.qodef-icon--plus {
					opacity: 1;
				}
			}
		}
		
		&.ui-state-active,
		&.ui-state-hover {
			color: #fff;
			background-color: $box-background-color;

			.qodef-accordion-mark {
				
				span {
					
					&.qodef-icon--minus {
						opacity: 1;
					}
					
					&.qodef-icon--plus {
						opacity: 0;
					}
				}
			}
		}
	}
	
	.qodef-accordion-content {
		padding: 16px 0 2px;
		margin: 0;
		
		p {
			margin: 0;
		}
	}

	&.qodef-behavior--toggle {

		.qodef-accordion-content {
			display: none;
		}
	}
}
