@import "compass";

/*------------------------------------------------------------------
Utilities
*/
@import "variables.scss";
@import "utilities.scss";

/*------------------------------------------------------------------
Variables
*/
$black: #111;
$border: rgba(#fff,0.15);

/*------------------------------------------------------------------
Switcher
*/
.thb-light-toggle {
	border: 1px solid rgba(#000,0.3);
	font-size: 11px;
	text-transform: uppercase;
	position: relative;
	display: inline-flex;
	height: 34px;
	align-items: center;
	padding: 0 9px 0 16px;
	border-radius: 100px;
	color: $black;
	cursor: pointer;

	.secondary-area & {
		align-self: center;
	}
	svg {
		height: 16px;
		width: auto;
	}
	.subheader & {
		border: none;
		height: 30px;
		padding: 0;
	}
	.light-text {
		display: none;
	}
	.thb-light-toggle-text {
		padding-right: 7px;
	}
	.thb-light-toggle-icon {
		width: 15px;
		position: relative;
		height: 20px;
		overflow: hidden;
		.toggle-icon {
			position: absolute;
			top: 50%;
			right: 0;
			margin-top: -8px;
			transform-origin: bottom left;
			@extend .quick-transition;
			&.dark-icon {
				svg path {
					fill: #834fd9;
					stroke: none;
				}
			}
			&.light-icon {

				@include rotateZ(120deg);
				opacity: 0;
				svg g {
					stroke: #f8d61c;
    			stroke-width: 5px;
				}
			}
		}
	}
	&.active {
		color: #fff;
		border-color: rgba(#fff, 0.2);
		.light-text {
			display: block;
		}
		.dark-text {
			display: none;
		}
		.toggle-icon {
			&.dark-icon {
				@include rotateZ(120deg);
				opacity: 0;
			}
			&.light-icon {
				transform-origin: bottom left;
				@include rotateZ(0deg);
				opacity: 1;
			}
		}
	}
}

/*------------------------------------------------------------------
Dark Mode Changes
*/
.thb-dark-mode-on {
	color: #fff;
	background: #111;

	.mfp-bg {
		background: rgba(#000,0.9);
	}
	.theme-popup,
	.thb-cookie-bar {
		background: $black;
	}
	.thb-cookie-bar p {
		color: #fff;
	}
	.mfp-wrap:not(.post-gallery-lightbox) .mfp-close svg g {
		stroke: #fff;
	}

	#wrapper [role="main"],
	.header,
	.footer,
	.subfooter,
	.post.block-category .post-category,
	.thb-instagram-row .thb-instagram-name-holder.text-center,
	.thb-blockgrid.thb-blockgrid-style1 .post.style1 .post-category,
	.post.style8 .post-inner-content {
		background: #111;
	}
	input[type="submit"], .button, .btn {
		&:not(.accent) {
			background: #fff;
			color: $black;

			&:hover {
				color: #fff;
			}
		}
	}
	input[type="submit"].style2.white, .button.style2.white, .btn.style2.white {
		color: $black;
	}
	input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
		background: transparent;
		border-color: $border;
		color: #fff;
		@include input-placeholder {
			color: rgba(#fff, 0.6);
		}

		&:focus {
			border-color: #fff;
		}
	}
	h1, h2, h3, h4, h5, h6,
	q, blockquote p, .post-content blockquote p,
	table tbody th, table tbody td,
	.wp-caption .wp-caption-text,
	.widget.thb_widget_twitter .thb-tweet,
	.select2-container--default .select2-selection--single .select2-selection__rendered,
	.login-page-form li a.active,
	.login-page-form li a:hover,
	.pagination ul .page-numbers.dots, .pagination .nav-links .page-numbers.dots, .woocommerce-pagination ul .page-numbers.dots, .woocommerce-pagination .nav-links .page-numbers.dots {
		color: #fff;
	}
	.login-page-form li a:before {
		border-color: #fff;
	}
	.post .post-excerpt {
    color: rgba(255,255,255,0.9);
	}
	.thb-carousel.right-arrows .slick-list:after {
		@include background-image(linear-gradient(to right, rgba(#111,0), rgba(#111,1) 70%));
	}
	a,
	.post .post-title a,
	.thb-readmore p a:hover,
	.thb-social-top.style3 .social-button-holder .social,
	.thb-social-top.style4 .social-button-holder .social,
	.commentlist .comment .vcard .fn .url, .commentlist .review .vcard .fn .url,
	.thb-social-links-container .thb-social-link,
	.thb-social-top.style4 .social-button-holder .social .thb-social-count,
	.widget .product_list_widget a,
	.thb-product-detail .product-information .yith-wcwl-add-to-wishlist>div>a {
		color: #fff;
	}

	.post .thb-post-bottom ul li,
	.widget .product_list_widget .woocommerce-Price-amount {
		color: rgba( #fff, 0.7 );
	}
	label,
	.post-detail .thb-article-tags span {
		color: rgba( #fff, 0.75 );
	}
	.post .thb-post-bottom .post-share .post-share-bubble .post-share-icons .post-social-share {
		color: $black;
	}
	blockquote,
	.thb-blockgrid.thb-blockgrid-style1 .post.style1 .post-category {
		border-color: #fff;
	}
	.tag-cloud-link {
		border-color: $border;
		color:#fff;
		&:hover {
			border-color: #fff;
			color: $black;
			background: #fff;
		}
	}
	.post.style18 .post-inner-content {
		@include min-break($break-small) {
			background: $black;
		}
	}
	.post.style6 .post-inner-content {
		background: transparent;
	}
	.thb-article-review.style2 .thb-article-figure .thb-average .thb-hexagon {
		stroke: $black;
	}
	.ad_container_bottom {
		background: rgba(#fff,0.05);
	}
	.thb-social-footer.style1 {
		background: rgba(#000,0.04);
	}
	.thb-social-links-container.circle-mono .thb-social-link .thb-social-icon-container {
		background: #000;
	}
	.thb-social-footer.style1 .thb-social-footer-buttons .social:not(:hover) {
		color: $black;
	}
	.commentlist .comment .reply svg path, .commentlist .review .reply svg path,
	.thb-carousel .slick-nav svg,
	.thb-carousel.center-arrows .slick-nav {
		fill: #fff;
	}
	.thb-carousel .slick-nav:hover {
		border-color: #fff;
	}
	.subheader,
	#comments,
	.post-detail .thb-post-share-container .thb-read-next,
	.post-detail .thb-article-tags,
	.thb-article-reactions,
	.thb-article-reactions .row .columns .thb-reaction .thb-reaction-image,
	.related-posts .related-posts-title,
	.thb-social-top.style1 .social-button-holder .social,
	.post-detail .thb-post-share-container .thb-article-author,
	.thb-lightbox-button,
	.thb-article-review.style2 .post_review_comments,
	.post-detail .thb-article-subscribe,
	.header.style2 .thb-navbar,
	.thb-masonry.thb-post-masonry-style2 .masonry-style2,
	.thb-post-grid.thb-post-grid-style2 .post,
	.wp-caption .wp-caption-text,
	.commentlist>.comment.depth-1,
	.thb-post-grid.thb-post-grid-style17 .post,
	.header.style9,
	.subfooter.style5,
	.header.style5 .thb-navbar,
	.header.style1 .thb-navbar,
	.thb-carousel.bottom-arrows .slick-bottom-arrows,
	.widget.thb_widget_top_reviews .post .widget-review-title-holder,
	.widget.thb_widget_top_reviews .post .widget-review-title-holder .thb-widget-score,
	.widget.thb_widget_posts_video .post.widget-video .post-title,
	.thb-post-grid.thb-post-grid-style13 .style3-tall,
	.thb-social-top.style2 .social-button-holder .social,
	.widget .product_list_widget li,
	.thb-post-grid.thb-post-grid-style8 .post.style3,
	.thb-pricing-table.style2 .pricing-container .pricing-description,
	.post.style16,
	.post.style6.style6-border .post-inner-content,
	.thb-post-grid.thb-post-grid-style18 div.post,
	.thb-carousel .slick-nav,
	.subfooter.style6 hr,
	.thb-post-grid.thb-post-grid-style19 div.post,
	.thb-social-links-container.border-color .thb-social-link,
	.thb-social-links-container.border-mono .thb-social-link,
	.thb-blockgrid.thb-blockgrid-style12 .post.style1,
	.thb-post-grid.thb-post-grid-style21 .post.style1,
	.thb-post-grid.thb-post-grid-style22 .post.style1,
	.thb-blockgrid.thb-blockgrid-style13 .post.style1,
	.thb-blockgrid.thb-blockgrid-style13 .thb-blockgrid-style13-posts>li:before,
	.thb-post-grid.thb-post-grid-style23 .post.style19,
	.smart-list.smart-list-v1 .smart-list-item,
	.thb-article-review.style1,
	.thb-article-review.style1 .thb-review-style1-footer,
	.thb-shopthelook,
	.cart-collaterals .shop_table tfoot tr, .shop_table.woocommerce-checkout-review-order-table tfoot tr,
	.woocommerce-checkout-payment .wc_payment_methods .wc_payment_method,
	.woocommerce-MyAccount-navigation ul li a,
	.post-detail.post-detail-style4 .post-title-container,
	.thb-blockgrid.thb-blockgrid-style14 .post.thumbnail-style4+.post.thumbnail-style4,
	.thb-social-top.style4 .social-button-holder .social .thb-social-count {
		border-color: $border;
	}
	.thb-social-top.style4 .social-button-holder .social .thb-social-count:before {
		border-left-color: $border;
		border-bottom-color: $border;
		background: #111;
	}
	.thb-pricing-table.style2 .pricing-style2-highlight,
	.post.style6.style6-shadow .post-inner-content,
	.thb-article-nav:hover,
	.thb-carousel.center-arrows .slick-nav,
	.widget.thb_widget_twitter .thb-twitter-carousel-wrapper {
		background: #000;
	}
	.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] {
		background: $border;
	}
	.widget.thb_widget_twitter .thb-twitter-content,
	select {
		background: transparent;
		border-color: $border;
	}
	select {
		color: #fff;
	}
	.widget.thb_widget_twitter .thb-twitter-user {
		color: #fff;
		border-color: $border;
	}
	.thb-article-nav:hover,
	.thb-carousel.center-arrows .slick-nav {
		border-color: #000;
	}
	.widget.thb_widget_twitter .thb-twitter-carousel-wrapper .thb-tweet .thb-tweet-actions svg,
	.widget.thb_widget_twitter .thb-tweet .thb-tweet-actions svg,
	.shop_bar #thb-shop-filters svg {
		fill: #fff;
	}
	.commentlist .comment .comment-metadata, .commentlist .comment .woocommerce-review__published-date, .commentlist .review .comment-metadata, .commentlist .review .woocommerce-review__published-date,
	.thb-pricing-table.style2 .pricing-container .thb_pricing_head .thb-price small {
		color: rgba(#fff,0.7);
	}
	.thb-pricing-table.style2 .pricing-container .btn:hover,
	.woocommerce-checkout-payment .wc_payment_methods+.place-order .button:hover {
		background: $accent;
	}
	.post.thumbnail-style1 .thumbnail-style1-inner {
		background: $black;
	}
	.thb-search-popup {
		background: $black;
		.thb-mobile-close div span:before {
			background: #fff;
		}
	}
	.post-detail .thb-post-share-container .thb-article-author p {
		color: rgba(#fff,0.8);
	}
	.widget.style3 .thb-widget-title span:after {
		 background: #fff;
	}
	.thb-carousel.right-arrows .slick-nav {
		background: transparent;
	}
	/* WooCommerce */
	.woocommerce-breadcrumb i,
	.price ins, .price>.amount,
	div.quantity .qty,
	.thb-product-detail .product-information .product_meta>span span,
	.woocommerce-tabs .tabs li.active a,
	.products .product .product_after_title .button,
	.shop_table,
	.regular-title,
	.woocommerce-checkout h3,
	#order_review_heading,
	.woocommerce-Address-title h3,
	.woocommerce-MyAccount-content h3,
	.woocommerce-MyAccount-content legend {
		color: #fff;
	}
	.coupon .button {
		color: #fff !important;
	}
	.woocommerce-tabs .tabs li a {
		color: rgba(#fff,0.75);
	}
	div.quantity .qty,
	div.quantity .plus, div.quantity .minus,
	.woocommerce-tabs .tabs li a:after {
		border-color: #fff;
		color: #fff;
	}
	.thb-product-detail .product-information .single_add_to_cart_button {
		background: #fff;
		color: $black;
	}
	.shop_table thead tr,
	.shop_table tbody tr {
		border-color: $border;
	}
	table:not(.variations):not(.shop_table):not(.group_table) {
		color: #fff;

		thead,
		tfoot {
			background: transparent;
			color: #fff;
			border-color: $border;
		}
		tbody {
			border-color: $border;
		}
		tbody,
		tbody tr {
			background: transparent;
		}
	}
	.wp-block-table.is-style-stripes {
		border-color: $border;
		table:not(.variations):not(.shop_table):not(.group_table) {
			tbody tr:nth-child(odd) {
				background: rgba(#fff,0.05);
			}
		}

	}
	/* Shortcodes */
	@extend .light-shortcodes;

	/* Select 2 */
	.select2.select2-container--default .select2-selection--single,
	.select2-container .select2-dropdown,
	.select2-container .select2-dropdown .select2-search input {
		background: $black !important;
		border-color: $border;
	}
}