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

.IconsStoriesAll {
	display: flex;
	flex-direction: column;
	max-height: 100%; // note: this needs to use `max-height` (not `height`) because that's what the storybook outer div for this example uses
	width: -webkit-fill-available; // if smaller than available space being of filtered results, then expand to fill

	> * {
		padding: 10px;
	}
}

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

.IconsStoriesAll_Content {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	align-content: baseline; // eliminate space between rows
	overflow-y: auto; // allow content scrolling so footer doesn't get pushed below fold

	.IconsStoriesAll_Card {
		height: 60px;
		width: 60px;
		margin: 5px;
		padding: 0;
		text-align: center;
		@include theme-background-white-else-graydark;
		@include theme-input-border;

		&,
		& * {
			cursor: pointer;
		}

		&:focus {
			outline: 0;
		}

		&:hover {
			@include theme-background-gray5-else-graydarkalt;
		}
		&:active {
			@include theme-background-gray15-else-gray;
		}
	}

	.IconsStoriesAll_Card__Selected {
		border: 2px solid $green !important;
	}

	.IconsStoriesAll_Card_Content {
		cursor: pointer;
		flex-grow: 1;
	}
}