/* wc.ui.definitionList.scss */
@import 'mixins_common.scss';

dl {
	margin: 0;

	//type flat
	// NOTE: the dl element is required here to differentiate from WFieldLayout with the same classNames generated from
	// LAYOUT attribute in XML
	&.flat {
		vertical-align: text-top;

		> dt,
		> dd {
			display: inline-block;
			margin-left: 0;
			padding-left: 0;
			vertical-align: top;
			width: auto;
		}

		> dt ~ dt { // any dt with a preceding sibling gets margin-left
			margin-left: $hgap-normal;
		}

		> dd { // all dds must have a preceding sibling so they all get margin-left
			margin-left: $hgap-small;
		}
	}
}

dt {
	font-weight: bold;
}

// type column
.column {
	> dt {
		display: inline-block;
		margin-right: 0.5%;
		vertical-align: text-top;
		width: 30%;

		+ dd { // the first dd does not have the left margin defined below
			margin-left: 0;
		}
	}

	> dd {
		display: inline-block;
		margin-left: 30.5%;
		padding-left: 0;
		vertical-align: text-top;
		width: 69.5%;
	}

	> dt,
	> dd {
		@include respond(phonelike) {
			@include border-box;
			display: block;
			margin-left: 0;
			margin-right: 0;
			width: 100%;
		}
	}
}

// type stacked
.stacked {
	> dt,
	> dd {
		display: block;
		margin-left: 0;
		padding-left: 0;
	}
}
/* end wc.ui.definitionList.scss */
