// About me widget
%widget-haze {
	content: "";

	position: absolute;
	bottom: 0;
	left: 0;

	height: 100%;
	width: 100%;

	opacity: 1;
	transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    // transition-delay: .3s;

	pointer-events: none;
}

.widget {
	border: 1px solid $borders;
	padding: rhythm(1);
	margin-bottom: rhythm(1/2);

	-ms-word-wrap: break-word;
	word-wrap: break-word;

	.site-footer &:last-child {
		margin-bottom: 0;
		padding-bottom: 0;

		&:after {
			content: '';
			color: white;
			width: 198px;
			max-width: 200px;
			height: 9px;
			display: block;
			margin: 1.14286rem auto;
			background: url("assets/svg/separator-simple.svg") transparent center center;
		}
	}

	ul {
		@extend .nav;
		@extend .nav--stacked;
	}

	a {
		@extend %alpha;

		padding: rem(6px) 0;

		color: $dark;
		@include fs(17px);

		.site-footer & {
			color: white;
		}

		&:hover {
			color: $accent;
		}
	}

	&.widget a {
		display: inline-block;

		&.btn {
			// display: block;
			@extend .btn;
			font-size: 12px;
			margin-top: rhythm(0.25);
			padding: rhythm(0.25);

			&:before {
				display:block;
				content:'';
			}
		}
	}
}

.widget-title {
	@extend %h4;
	letter-spacing: 0.1em;
	margin-top: 0;
	text-align: center;
}





/* Custom Widget - About Me */

.widget_silk_about_me {
	display: table;
	position: relative;
	padding: 0;

	border: 0;
	overflow: hidden;

	background: $accent;

	min-height: rem(340px);

	.widget-title {
		margin-bottom: rem(6px);
	}

	&:before {
		@extend %widget-haze;
		z-index: 9;
		opacity: 1;
		transition-delay: .3s;
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 56%,rgba(0,0,0,0.2) 64%,rgba(0,0,0,0.65) 100%);
	}

	&:after {
		@extend %widget-haze;
		z-index: 9;
		opacity: 0;
		transition-delay: .3s;
		background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%);
	}

	.silk-about-me-widget__image {
		position: absolute;
		width: 100%;
		height: 100%;

		top: 0;
		left: 0;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

	.silk-about-me-widget__container {
		display: table-cell;
	    vertical-align: top;
		position: relative;
		z-index: 10;
		padding: rhythm(1.25) rhythm(1);

		text-align: center;
		color: white;

		// transform: translateY(170px);
		transform: translateY(calc(100% - 170px));
		transition: all .3s .3s ease-in-out;

		&:after {
			@extend %widget-haze;
			z-index: 11;
			opacity: 1;
			transition-delay: .3s;

			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 110px, rgba(0,0,0,0.7) 170px);
		}

	}


	&:hover, &:focus, .touch & {

		&:before {
			opacity: 0;
		}

		&:after {
			opacity: 1;
		}

		.silk-about-me-widget__container {
			transform: none;
			transition-delay: .3s;
		}

		.silk-about-me-widget__container:after {
			opacity: 0;
		}

		%widget-haze {
			transition-delay: .3s;
		}
	}

	.touch & {

		&:before {
			opacity: 0;
		}

		&:after {
			opacity: 1;
		}
	}

	.widget-title {
		color: white;
		text-shadow: 0.5px 1px 0px rgba(0, 0, 0, 0.3);
	}

	.silk-about-me-widget__name {
		@extend %alpha;
		@include fs(30px);
		font-style: italic;
		-webkit-font-smoothing: antialiased;

		text-shadow: 0.5px 1px 0px rgba(0, 0, 0, 0.3);

	}

	.silk-about-me__text {
		@include fs(12px);
	}

	.separator {
		max-width: 128px;
		overflow: hidden;
		// margin-left: auto;
		// margin-right: auto;
		margin: rhythm(0.25) auto;

		svg {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	a {
		color: $secondary;
	}

	p {
		margin-bottom: rhythm(0.25);
		&:last-child {
			margin-bottom: 0;
		}
	}
}





/* Widgets */

.widget.shrink {

	.sidebar--main & {
		overflow: hidden;
		position: relative;

		transition: all .3s .3s ease-in-out;

		&:hover, &:focus {

			.separator {
				opacity: 0;
				transition-delay: .3s;
			}

			&:after {
				opacity: 0;
			}
		}

		&:after {
			@extend %widget-haze;
			background: linear-gradient(to top, rgba(255, 255, 255, 1) 3rem, rgba(255, 255, 255, 0) 6rem);
		}


		.separator {
			position: absolute;
			bottom: rem(35px);
			left: rem(30px);
			right: rem(30px);
			z-index: 20;

			pointer-events: none;

			transition: opacity .3s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
	}
}

.widget.focused {
	max-height: none !important;

	.separator {
		display: none;
	}
}

.widget_categories, .widget_archive {
	ul li {
		display: inline-block;
		width: 49%;
	}
}


.widget_categories li {
	vertical-align: top;

	.children {
		padding-left: rem(10px);
	}
}


/* Widget - recent comments */

.recentcomments{
	padding: rem(6px) 0;

	color: $gray;
}





/* Widget - RSS */

.widget_rss{
	li{
		margin-bottom: $u;
	}

	cite{
		display: block;
		margin-top: $u/4;
	}

	&.widget_rss a {
			display: inline;
	}
}

.rsswidget{ //rss entry title
	text-decoration: underline;
	font-weight: bold;
}

.rss-date{
	&:before{
		content: '-';

		display: inline-block;
		margin: 0 3px;
	}
}

.widget_rss_links a{
	display: inline-block;
	vertical-align: middle;
}

.jetpack_subscription_widget {
	position: relative;

	padding: rem(45px);

	color: white;
	background: $accent;
	text-align: center;

	.widget-title {
		@extend %alpha;

		margin: 0;

		@include fs(30px);
		text-transform: none;

		color: white;

		&:after {
			content: '';
			color: white;

			width: 128px;
			max-width: 196px;
			height: 9px;
			display: block;
			margin: rem(22px) auto;

			background: url('assets/svg/separator-simple.svg') center center;
		}
	}

	#subscribe-email input {
		color: #000000;
		padding: 8px 12px;
		width: 100%;
	}

	input[type="submit"] {
		padding: rem(6px) rem(30px);

		background-color: white;
		color: $accent;

		@include fs(14px);
		letter-spacing: 0.35em;
	}

	&:before {
		content: "";

		position: absolute;
		top: 10px;
		left: 10px;
		bottom: 10px;
		right: 10px;

		border: 1px solid $secondary;
		display: block;
		pointer-events: none;
	}
}

.widget_silk-popular-posts {
	padding: rem(30px);

	ol {
		list-style: none;
		counter-reset: my-counter;
	}

	.popular-posts_item {
		position: relative;
		padding-left: 20px;

		margin-bottom: rem(12px);

		&:first-child {
			padding-left: 0;
		}

		&:before {
			content: counter(my-counter) '.';
			counter-increment: my-counter;

			position: absolute;
			left: 0;
			top: 0;


		}

		.bump-view{
			@include fs(12px);
			@extend %beta;

			padding: 0;
			display: inline;
			margin-right: 5px;
		}

		&.large-thumbnail {
			position: relative;

			&:before {
				visibility: hidden;
				position: absolute;
				pointer-events: none;
			}

			.bump-view:first-child{
				position: relative;

				margin-bottom: rem(20px);

				img {
					display: block;
					margin: 0 auto;
				}

				&:after {
					@extend .comment-number;

					content: counter(my-counter);

					position: absolute;
					left: 50%;
					bottom: -12px;

					display: block;
					background: $accent !important;

					font-size: 16px !important;

					transform: translateX(-50%);
				}
			}

			.bump-view {
				display: block;
				color: $accent;
				text-align: center;

				@include fs(20px);
			}

			.categories-list {
				margin: rem(12px) 0;
				display: block;
				text-align: center;
			}

			&:after {
				content: '';
				color: white;

				width: 128px;
				max-width: 200px;
				height: 12px;
				display: block;
				margin: rem(16px) auto;

				background: url('assets/svg/separator-simple-inversed.svg') $secondary center center;
			}
		}

		&:nth-child(1), &:nth-child(2), &:nth-child(3) {
			.bump-view{
				@include fs(16px);
				@extend %alpha;
			}

			&:before {
				@include fs(18px);
			}
		}
	}

	.categories-list {
		display: inline-block;

		a, & {
			@extend %beta;
			@include fs(10px);
			color: $gray;
			text-transform: uppercase;

			letter-spacing: 0.1em;
		}
	}
}

.widget.widget_top-posts a {
	display: block;
}

/* Footer sidebar widgets */

.site-footer{

	.widget {
		max-width: rem(340px);
		margin-left: auto;
		margin-right: auto;
		border: 0;
		padding-left: 0;
		padding-right: 0;
		text-align: center;

		.separator {
			display: none;
		}
	}

}

// WP.com instagram widget css - added here
// just for development - to be overwritten
// class: .widget_wpcom_instagram_widget
// @todo to be removed when in production

.wpcom-instagram-images {
	overflow: hidden;
}

.wpcom-instagram-images img {
	display: block;
	float: left;
	height: auto;
}

.wpcom-instagram-columns-1 img {
	margin: 0 1% 5px;
	max-width: 97%;
}

.wpcom-instagram-columns-2 img {
	margin: 0 1% 2%;
	max-width: 47%;
}

.wpcom-instagram-columns-3 img {
	margin: 0 1% 2%;
	max-width: 30%;
}

// Silk's custom Instagram widget styling

.site-footer {
	aside.widget_wpcom_instagram_widget {
		@extend .clearfix;

		position: relative;
		top: -30px;
		margin-bottom: -15px;


		max-width: none;
		padding: 0;

		@include query-above($lap) {
			top: -60px;
			margin-bottom: -30px;
		}

		.widget-title {
			@extend .screen-reader-text;
		}

		a {
			float: left;
			padding: 0;
			width: 12.5%;
		}

		img {
			margin: 0;
			width: 100%;
			max-width: none;
			height: auto;
		}
	}
}

.site-footer .widget + aside.widget_wpcom_instagram_widget {
	top: 0;
	margin-bottom: 30px;
}

.site-footer aside.widget_wpcom_instagram_widget:last-child:after {
	content: none;
}