.category-container {
	border: 1px solid $gray-300;
	background: $white;
	
	@include display-flex();
	@include flex(1);
	@include border-radius($border-radius-lg);
	@include clearfix();
	@include media-breakpoint-down(md) {
		background: none;
		border: none;
		display: block;
	}
	
	& .category-sidebar {
		width: rem(250px);
		padding: rem(20px);
		
		@include media-breakpoint-down(lg) {
			width: rem(200px);
		}
		@include media-breakpoint-down(md) {
			width: auto;
			padding: 0;
			margin-bottom: rem(20px);
		}
		
		& + .category-detail {
			@include media-breakpoint-down(lg) {
				margin-left: 0;
				border-left: 1px solid $gray-300;
			}
			@include media-breakpoint-down(md) {
				border: none;
			}
			
			& .category-item {
				&.full {
					@include media-breakpoint-down(lg) {
						margin: -1px -1px 0 -1px;
						
						@include border-radius(0 $border-radius-lg 0 0);
						
						& .item {
							@include border-radius(0 $border-radius-lg 0 0);
						}
					}
					& .item {
						@include media-breakpoint-down(md) {
							@include border-radius($border-radius-lg);
						}
					}
				}
			}
		}
		& .category-list {
			list-style-type: none;
			margin: 0;
			padding: 0;
			
			@include media-breakpoint-down(md) {
				margin-bottom: rem(-5px);
			}
			
			& > li {
				@include media-breakpoint-down(md) {
					display: inline-block;
					margin-right: rem(20px);
					margin-bottom: rem(5px);
				}
				
				& + li {
					border-top: 1px solid $gray-300;
					
					@include media-breakpoint-down(md) {
						border-top: none;
					}
				}
				& > a {
					color: lighten($black, 30%);
					font-weight: 600;
					display: block;
					padding: rem(8px) 0;
					line-height: rem(20px);
					
					@include media-breakpoint-down(md) {
						padding: 0;
					}
					
					&:hover,
					&:focus {
						text-decoration: none;
						color: $dark;
					}
				}
				&.list-header {
					font-size: rem(12px);
					color: lighten($black, 60%);
					font-weight: bold;
					padding-bottom: rem(10px);
					text-transform: uppercase;
					
					@include media-breakpoint-down(md) {
						display: none;
					}
				}
			}
		}
	}
	& .category-detail {
		@include flex(1);
		
		& .category-item {
			@include media-breakpoint-down(lg) {
				margin-bottom: 0;
			}
			
			&.full {
				& + .category-item {
					&.list {
						& .item-row {
							&:first-child {
								& .item {
									&:last-child {
										@include border-radius(0 $border-radius-lg 0 0);
									}
								}
							}
							&:last-child {
								& .item {
									&:last-child {
										@include border-radius(0 0 $border-radius-lg 0);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}