/* layouts */

.carbon-social-layout-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}

.carbon-social-layout-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* admin */

.carbon-social-notice {
	border-radius: 10px;
	border: solid 2px red;
	background: rgba(255, 0, 0, 0.2);
	padding: 10px;
}
.carbon-social-notice p {
	margin: 0;
	padding: 0;
}

/* global */

.carbon-social-post-media {
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	display: block;
}

.carbon-social-full-picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	z-index: 1;
}

/* twitter */

.carbon-social-twitter-feed {
	border: solid 1px #ccc;
	padding: 20px;
}

.carbon-social-tweet-item {
	border: solid 1px #ccc;
	overflow: hidden;
	padding: 20px;
}
.carbon-social-tweet-item .carbon-social-tweet-attachments .carbon-social-tweet-media img {
	max-width: 100%;
}

/* facebook */

.carbon-social-facebook-feed {
	border: solid 1px #ccc;
	padding: 20px;
}

.carbon-social-facebook-item {
	border: solid 1px #ccc;
	overflow: hidden;
	padding: 20px;
}
.carbon-social-facebook-item .carbon-social-post-media {
	margin: 20px 0;
}

.carbon-social-facebook-item .carbon-social-video-play-button {
	transition: 0.1s;
	cursor: pointer;
	user-select: none;
	width: 100px;
	height: 100px;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	z-index: 2;
	opacity: 0.7;
}
.carbon-social-facebook-item .carbon-social-post-media:hover .carbon-social-video-play-button {
	opacity: 1;
}

/* instagram */

.carbon-social-instagram-feed {
	border: solid 1px #ccc;
	padding: 20px;
}

.carbon-social-instagram-item {
	border: solid 1px #ccc;
	overflow: hidden;
	padding: 20px;
}

.carbon-social-instagram-item .carbon-social-post-media {
	margin: 20px 0;
}

.carbon-social-instagram-video {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	pointer-events: none;
}

.carbon-social-instagram-item .carbon-social-post-media .carbon-social-video-play-button,
.carbon-social-instagram-item .carbon-social-post-media .carbon-social-video-pause-button {
	transition: 0.4s;
	position: absolute;
	inset: 0;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
	background-size: 66px !important;
	background-position: center;
	background-repeat: no-repeat;
}
.carbon-social-instagram-item .carbon-social-post-media .carbon-social-video-play-button {
	background-image: url('../images/play-button.svg');
}
.carbon-social-instagram-item .carbon-social-post-media .carbon-social-video-pause-button {
	background-image: url('../images/pause-button.svg');
	pointer-events: none;
}

.carbon-social-instagram-item .carbon-social-post-media .carbon-social-loading {
	transition: 0.4s;
	opacity: 0;
	position: absolute;
	z-index: 5;
	top: calc(50% - calc(20px));
	left: calc(50% - calc(20px));
	display: block;
	width: 40px;
	height: 40px;
	pointer-events: none;
	user-select: none;
	animation: rotation 2s infinite linear;
	background-image: url('../images/loading.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.carbon-social-instagram-item .carbon-social-progress-bar-container {
	transition: 0.4s;
	position: absolute;
	z-index: 5;
	bottom: 5px;
	left: 5px;
	right: 5px;
	height: 5px;
	opacity: 0;
	pointer-events: none;
}
.carbon-social-instagram-item .carbon-social-progress-bar-container .carbon-social-progress-bar {
	transition: 0.4s;
	height: 100%;
	background-color: rgb(145, 250, 255);
	border-radius: 15px;
}

.carbon-social-instagram-item .carbon-social-post-media.active .carbon-social-video-play-button {
	pointer-events: none;
	opacity: 0;
}

.carbon-social-instagram-item .carbon-social-post-media.active:hover .carbon-social-video-pause-button {
	pointer-events: all;
	opacity: 1;
}

.carbon-social-instagram-item .carbon-social-post-media.active .carbon-social-progress-bar-container {
	opacity: 1;
	pointer-events: all;
}

.carbon-social-instagram-item .carbon-social-post-media.active.buffing .carbon-social-loading,
.carbon-social-instagram-item .carbon-social-post-media:hover:not(.active) .carbon-social-video-play-button  {
	opacity: 1;
}

.carbon-social-instagram-caption {
	font-size: 12px;
	line-height: 1.2em;
}