@import './fonts/gotham/less/gotham';
@import './variables.less';

//@import '~@meniga/icons/menicon-actions/less/font';
//@import '~@meniga/icons/menicon-actions/mapping/generated/icons';

//@import '~@meniga/icons/menicon-categories/less/font';
//@import '~@meniga/icons/menicon-categories/mapping/generated/categories';

//Define where to use font families here
body, input {
	font-family: 'gotham', Arial, Tahoma, Verdana, Helvetica, Sans-Serif;
}

/*.Icon {
	&:before {
		font-family: 'MeniconActions';
	}
}

.CategoryIcon.Icon {
	&:before {
		font-family: 'MeniconCategories';
	}
}*/

.Textarea-input {
	font-family: 'gotham', Arial, Tahoma, Verdana, Helvetica, Sans-Serif;
}

.Storybook-demo-hide {
	display: none;
}

.Storybook-linenumbers {
	color: #767676;
    background: 0 0;
    text-shadow: 0 1px #fff;
    font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    tab-size: 4;
	hyphens: none;
}

#storybook-docs {
	.sbdocs-title {
		display: none;
	}
}

.Story {
	color: @textColor;

	.Chapter {
		&-body {
			margin-bottom: @primaryMargin--lg;
		}

		&-props {
			margin-bottom: @primaryMargin--lg;
		}

		&-items-row {
			align-items: stretch;

			> .Column {
				> .Column-content {
					height: 100%;
					padding: @primaryPadding 0 @primaryPadding--lg 0;
				}
			}
		}

		&-items {
			margin: @primaryMargin--xl 0;

			.Item {
				border: 1px solid @primaryBorderColor;
				border-radius: 3px 0 3px 3px;

				&-content {
					padding: @primaryPadding;
				}
			}
		}

		&-branding {
			&-checkbox, &-text, &-select {
				vertical-align: bottom;
			}

			&-text {
				display: inline-block;
				margin-right: 12px;
				line-height: 48px;
			}

			&-select {
				margin-right: 12px;
			}

			&-separator {
				display: inline-block;
				height: 48px;
				margin: 0 12px;
				width: 2px;
				background-color: @primaryBorderColor;
				vertical-align: bottom;
			}
		}
	}

    .Item {
		position: relative;
		height: 100%;

		&--dark {
			background: @secondaryBrandColor;
		}

		&-header {
            font-weight: normal;
			margin: 0;
			padding: 3px;
			font-size: 10px;
			background: @secondaryBackgroundColor;
			border-bottom: 1px solid @primaryBorderColor;
		}
		
		&-content {
			padding: @primaryPadding 0;
		}
    }
}


//********************************************
//	Container implementation
//********************************************/

@container-padding: 60px;

.Container--alt {
	background: #f1f1f1;
}

.Container--wide {
	.Container-body, .Container-header {
		padding: 0 @container-padding;

		.is-collapsed & {
			padding: 0 @container-padding;
		}
	}
}

.Container--narrow {
	.Container-body, .Container-header {
		padding: 0 @appNavigation-width + 100px;

		.is-collapsed & {
			padding: 0 @container-padding;
		}
	}
}

.Container-body, .Container-header {
	padding: 0 @container-padding 0 @appNavigation-width + @container-padding;

	.is-collapsed & {
		padding:  0 @container-padding 0 @appNavigation-width--mobile + @container-padding;
	}
}
