// ===========================
// Nebula-specific Feature Styles
// ===========================

//Service Worker Install Button
.nebula-sw-install-button {
	&.inactive {display: none; visibility: hidden;} //SW not supported or not yet available for install
	&.ready {} //Awaiting user click
	&.prompted {opacity: 0.4;} //Awaiting accept/dismiss of Chrome install prompt
	&.success {display: none; visibility: hidden;} //Successfully installed
}

//Infinite Load
.infinite-start-note {margin: 30px 0;
	a {font-size: rem(18px);}
}

.loadmorecon {position: relative; text-align: center; margin: 50px 0;
	&::before {content: "\f141"; @include font-awesome("solid"); position: absolute; top: 10px; left: 0; width: 100%; display: block; text-align: center; opacity: 0; pointer-events: none;}

	.infinite-loading {display: none; position: absolute; top: 0; left: 0; width: 100%;
		div {display: inline-block; width: 6px; height: 6px; border-radius: 12px; background: #444; animation: nebula-zoom 1s infinite easing(easeInOutQuad);
			&.b {animation-delay: .2s;}
			&.c {animation-delay: .4s;}
		}
	}
	&.loading .infinite-loading {display: block;}

	&.disabled a {color: #444; opacity: 0.3; pointer-events: none;
		&::after {content: ""; opacity: 0; pointer-events: none;}
	}

	.infinite-load-more {position: relative; font-size: rem(18px); padding: 10px;
		&::after {content: "\f107"; @include font-awesome("solid"); position: absolute; bottom: -10px; transform: translate3d(0, 0, 0); left: 0; width: 100%; display: block; text-align: center; transition: transform 0.25s ease; will-change: transform;}
		&:hover::after,
		&:focus::after {transform: translate3d(0, -3px, 0);}
	}

	&.loading .infinite-load-more {opacity: 0; pointer-events: none;}
}

.lazy-load {background-image: none !important;} //.js here may prevent true lazy loading due to race condition: https://github.com/chrisblakley/Nebula/issues/1558#issuecomment-361121336

.nebula_excerpt {white-space: nowrap;}

//jQuery UI Autocomplete Hero Search
div#nebula-hero-formcon {text-align: center; display: none;
	@include media("lg"){display: block;}
}

form#nebula-hero-search {display: inline-block; position: relative; margin: 0; width: 100%; max-width: 600px; text-align: center; z-index: 100; transition: all 0.5s;
	i, svg {position: absolute; top: rem(12px); left: 13px; font-size: rem(16px); color: #292b2c; pointer-events: none; z-index: 100;}

	input {display: block; width: 100%; font-size: rem(18px); line-height: rem(18px); padding: 8px 0 8px 35px; @include background-color(#fff, 0.9); border-radius: 0; box-shadow: 0 3px 24px rgb(0 0 0 / 20%);
		&:focus {@include background-color(#fff, 0.95); box-shadow: 0 0 32px rgb(red($primary_color), green($primary_color), blue($primary_color), 60%);}
	}

	&.autocompleted input {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: none;}
}

.form-identifier-nebula-hero-search { //Only on front-page hero search
	.external-link a {
		&::after {content: "\f35d"; @include font-awesome("solid"); margin-left: 5px; font-size: rem(10px); opacity: 0.4;}
	}
}

//jQuery UI Autocomplete
.ui-autocomplete.ui-widget-content {padding: 0; list-style: none; margin-top: -10px; @include background-color(#fff, 0.9); backdrop-filter: blur(6px); border: none; border-top: 1px dotted #ddd; box-shadow: 1px 6px 9px 0 rgb(0 0 0 / 20%); z-index: 9999 !important; overflow: hidden;

	li {position: relative;
		a {display: block; padding-left: 15px; padding-top: 3px; padding-bottom: 3px; @include link-colors(#292b2c, #292b2c); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; transition: none 0.25s;
			&::before {content: "\f105"; @include font-awesome("solid"); width: 10px; margin-right: 5px; font-size: rem(10px); text-align: center; opacity: 0.5;}
		}
	}

	.ui-menu .ui-menu-item {font-size: rem(12px); padding: 3px 5px;}
	.ui-state-hover,
	.ui-widget-content .ui-state-hover,
	.ui-widget-header .ui-state-hover,
	li.ui-state-focus,
	.ui-widget-content li.ui-state-focus,
	.ui-widget-header li.ui-state-focus,
	.ui-widget-header li.ui-state-active {margin: 0; font-weight: normal; background: $primary_color; color: #fff; border: none;}
	.ui-state-hover a,
	li.ui-state-focus a,
	a.ui-state-active {color: #fff;}

	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-button.ui-state-active:focus {margin: 0; border: none; background: $primary_color;}

	&.type-post a::before {content: "\f1ea";}
	&.type-page a::before {content: "\f15c";}
	&.type-category a::before {content: "\f02e";}
	&.type-tag a::before {content: "\f02b";}
	&.type-menu-item a::before {content: "\f0c9";}
	&.type-event a::before {content: "\f073";}
	&.type-product a::before {content: "\f07a";}
	&.type-attachment a::before {content: "\f1c5";}
	&.file-zip a::before {content: "\f1c6";}
	&.type-user a::before {content: "\f007";}
	&.page-home a::before {content: "\f015";}
	&.sticky-post a::before {content: "\f08d";}

	&.search-link {font-size: rem(12px); border-top: 1px dotted #ddd;
		a {opacity: 0.7;}
	}
	&.more-results a::before {content: "\f002";}
	&.no-results a::before {content: "\00a0";}

	@include mobile("landscape"){left: 0 !important; width: 100% !important;}
}

//Anchor tags that should not have transitions
.search-choice-close {transition: none 0.25s;}

//Highlight and emphasize search term in results
.searchresultword {@include background-color($primary_color, 0.2); padding: 0 2px; border-radius: 6px; font-size: inherit !important; transition: none 0.25s;
	&.transitionable {transition: background 0.25s;}

	article:hover &,
	article:focus & {@include background-color(#ff0 !important, 0.5);}
}

.filterresultword {@include background-color(#ff0, 0.2); padding: 0 2px; border-radius: 6px; font-size: inherit !important;}

.search .highlight {@include background-color($primary_color, 0.2);}

//Row that contains event specific help: "Did you mean?", "Single result redirection", etc.
#nebula-drawer {position: relative; @include background-color(#000, 0.05); z-index: 1000; padding-top: 30px; padding-bottom: 15px;
	.close {position: absolute; top: 0; right: 0; z-index: 500;}
	input {max-width: 200px;}
}

#suggestedpage {display: none;}

ol.nebula-breadcrumbs {display: flex; list-style: none; position: relative; margin-bottom: 50px; padding: 3px 0; font-size: rem(14px); align-items: baseline;
	li {
		&.delimiter {padding: 0 4px; opacity: 0.6;}
	}
}

.more-or-prev-events {display: block; width: 100%; height: 50px; line-height: 50px; color: #fff; margin: 25px 0;
	&:hover,
	&:focus {color: #fff;}
	&.all-events-loaded,
	&.no-prev-events {pointer-events: none; opacity: 0.3;}
}

a.resetfilters {font-size: rem(12px); color: $danger_color; opacity: 0;
	&:hover,
	&:focus {color: darken($danger_color, 15%);}
	&.active {opacity: 1;}
}

#about-the-author {position: relative; background: #eee; padding-top: 30px; padding-bottom: 10px; margin-top: 20px; margin-bottom: 15px;
	.author-headshot {min-height: 100px; margin-bottom: 20px; text-align: center;
		img {width: 100%; max-width: 200px; /* border-radius: 500px; */ transition: all 0.75s;}
		@include media("md"){text-align: left;}
	}
	.author-name {display: block; padding-bottom: 15px; text-align: center;
		@include media("md"){display: inline-block; padding: 0; text-align: left;}
	}
	.author-location {display: block; white-space: nowrap; text-align: center;
		@include media("md"){text-align: left; display: inline-block;}
	}
	.author-social {display: block; margin-top: 17px; margin-bottom: 20px; font-size: rem(24px); text-align: center;
		@include media("md"){display: inline; margin-bottom: 0; float: right; font-size: rem(12px);}
	}
	.author-meta {margin-top: 5px; margin-bottom: 12px; font-size: rem(12px);
		i {margin-right: 2px;}
	}
	.author-jobtitle {display: block; text-align: center; margin-bottom: 15px;
		@include media("md"){display: inline-block; text-align: left; margin-bottom: 0;}
	}
	.author-contact {float: none; display: block;
		.author-email,
		.author-phonenumber {white-space: nowrap; display: block; text-align: center;
			@include media("md"){display: inline-block; margin-right: 5px; text-align: left;}
		}
		@include media("lg"){float: right; display: inline;}
	}
}

ul.sharing-links {list-style-type: none; margin: 0; padding: 0;
	li {vertical-align: inherit !important;
		&:not(.hidden) {display :inline-block; margin: 0 5px;
			&:first-of-type {margin-left: 0;}
			&:last-of-type{margin-right: 0;}
		}

		&.hidden + li {margin-left:0;}
	}
}

#error-page-suggestions {margin-top: 50px;
	h2 {font-size: rem(21px);}
	.suggestion-title {font-size: rem(16px); line-height: 28px;}
}

//Service Worker update prompt
#nebula-sw-update {position: fixed; bottom: 10px; transform: translate3d(0, 0, 0); margin: 0 auto; left: 0; right: 0; background: $primary_color; color: readable-color($primary_color); font-size: rem(16px); border: none; border-radius: 50px; box-shadow: 0 8px 24px 0 rgb(0 0 0 / 30%); padding: 10px 20px; outline: none; z-index: 9000; opacity: 0; transition: all 1s easing(easeOutBack); will-change: opacity, transform;
	&.active {transform: translate3d(0, -10px, 0); opacity: 1;}
}