@import "../ui.vars.less";

sc-list {
	display: block;
	margin: 0;
	padding: 0px;
	line-height: 1rem;

	&[scroll] {
		max-height: 400px;
		overflow-y: auto;
	}

	&[scroll-325] {
		max-height: 325px;
		overflow-y: auto;
	}

	&[scroll-600] {
		max-height: 600px;
		overflow-y: auto;
	}
}

sc-list-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	position: relative;

	&[landscape-stack] {
		sc-list-item {
			@media only screen and (max-width: @landscape) {
				&[action] {
					transform: translate(0%,-50%);
					top: 32px;
					right: 8px;
					position: absolute;
				}
			}
		}
	}

	sc-divider {
		position: absolute;
		width: 100%;
		border-top: 1px solid  #e1e1e1;
		display: block;
		bottom: 0;
		left: 0;
	}
}

sc-list-item {
	display: block;
	flex: 1 1 0%;
	-ms-flex: 1 1 auto;
	min-width: 1px;
	padding-right: 12px;

	&:focus {
		outline: none;
	}

	&[action] {
		display: flex;
		flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		sc-list-item {
			flex: 0 0 auto;
			-ms-flex: 0 0 auto;
		}

		@media only screen and (max-width: @mobile) {
			&[action] {
				transform: translate(0%,-50%);
				top: 32px;
				right: 8px;
				position: absolute;
			}
		}

	}

	&[item-end] {
		padding-right: 0 !important;
	}

	&[no-padding]{
		padding: 0px 0px;
	}

}