@import '../../styles/_partials/index';

.IconsStoriesAll_Footer {
	@include theme-background-gray5-else-graydarkalt;
	@include theme-border-top;
	box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.04);

	.IconsStoriesAll_AdditionalProps {
		display: flex;
		flex-wrap: wrap;
		align-content: baseline; // eliminate space between rows
		@include theme-border-bottom;

		.IconsStoriesAll_AdditionalProps_Container {
			margin: 0 5px 10px;

			.IconsStoriesAll_AdditionalProps_Label {
				margin-right: 5px;
			}
		}
	}

	.IconsStoriesAll_Details:first-child {
		margin-top: 0;
	}

	.IconsStoriesAll_Details {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-top: 10px;

		.IconsStoriesAll_Details_VerticalDivider {
			margin: 0 10px;
			@include theme-border-right;
		}

		.IconsStoriesAll_Details_PropsBtn {
			margin: 0 5px 5px;
			color: $green;
			text-align: right;
			cursor: pointer;
		}

		.IconsStoriesAll_Details_Col1 {
			display: flex;
			flex-direction: column;
			flex-grow: 1;

			.IconsStoriesAll_Details_IconName {
				margin-bottom: 10px;
			}

			.IconsStoriesAll_Details_Snippet {
				position: relative;
				flex-grow: 1;
				width: 100%;
				padding: 5px;
				@include theme-background-white-else-graydark;
				@include theme-input-border;
				cursor: pointer;

				.IconsStoriesAll_Details_Snippet_CopyToast {
					position: absolute;
					bottom: 0;
					right: 3px;
					padding: 5px;
					font-weight: 700;
					font-size: 10px;
					line-height: 10px;
					color: $white;
					background: $green;
					//border-bottom-right-radius: 4px;

					svg {
						margin-right: 3px;

						path {
							fill: $white;
						}
					}
				}
			}
		}

		.IconsStoriesAll_Details_Col2 {
			display: flex;
			flex-direction: column;
			justify-content: flex-end; // eliminate space between rows and place on bottom
		}

		.IconsStoriesAll_Details_Col3 {
			.IconsStoriesAll_Details_PreviewText {
				margin-bottom: 5px;
				font-size: 12px;
				text-align: center;
			}

			.IconsStoriesAll_Details_Preview {
				display: flex;
				width: 50px;
				height: 50px;
				align-items: center;
				justify-content: center;
				@include theme-background-white-else-graydark;
				@include theme-border;
			}
		}
	}
}