.wp-block-themeisle-blocks-button-group-header-panel {
	&.is-opened {
		padding: 0;
	}

	.header-tab {
		display: inline-block;
		width: calc( 100% / 2 );
		padding: 10px 20px;
		text-align: center;
		cursor: pointer;

		&.is-selected {
			border-bottom: 2px solid #0085ba;
			background: #f3f4f5;
		}

		&:hover {
			background: #f3f4f5;
		}

		span {
			display: inline-block;
			font-size: 12px;

			svg {
				width: 20px;
				height: 20px;
				display: block;
				margin: 0 auto;
			}
		}
	}
}

.wp-block-themeisle-blocks-select-button-button {
	background: transparent;
	position: relative;
	width: 100%;
	box-shadow: 0 0 0 transparent;
	transition: box-shadow .1s linear;
	border-radius: 4px;
	border: 1px solid #8d96a0;
	
	&.is-button {
		background: transparent;
	}
	
	&:hover {
		background: #fafafa;
		border-color: #999;
		box-shadow: inset 0 -1px 0 #999;
		color: #23282d;
		text-decoration: none;
	}
	
	&:focus {
		border: 1px solid black;
	}
	
	&:after {
		content: "";
		pointer-events: none;
		display: block;
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 5px solid currentColor;
		margin-left: 4px;
		margin-right: 2px;
		right: 8px;
		top: 12px;
		position: absolute;
	}
}

.wp-block-themeisle-blocks-button-group {
	display: flex;
	margin-bottom: 0;
	position: relative;

	&.collapse-desktop {
		flex-direction: column;

		.wp-block-themeisle-blocks-button {
			margin: 10px 0 !important;
		}
	}

	i {
		&.margin-left {
			margin-left: 10px;
		}
	
		&.margin-right {
			margin-right: 10px;
		}
	}

	.editor-rich-text {
		display: inline-block;
	}

	.editor-rich-text__tinymce.mce-content-body {
		cursor: text;
	}

	.editor-rich-text__tinymce[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce {
		opacity: 0.2;
	}

	.editor-block-preview__content & {
		max-width: 100%;

		.editor-rich-text__tinymce[data-is-placeholder-visible="true"] {
			height: auto;
		}

		.wp-block-themeisle-blocks-button {
			max-width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.wp-block-themeisle-blocks-button {
		cursor: pointer;
		display: inline-block;
		font-size: 18px;
		margin: 0;
		text-align: center;
		text-decoration: none;
		white-space: normal;
		overflow-wrap: break-word;
		height: 100%;
	}
}

.wp-block-themeisle-blocks-button-group-hover-control {
	width: 100%;
	margin-bottom: 20px;

	.components-button {
		width: calc( 100% / 2 );
		justify-content: center;
	}
}

.edit-post-settings-sidebar__panel-block .components-panel__body {
	.components-color-palette {
		display: inline-block;
	}

	.components-base-control.border-width {
		margin-top: 2em;
	}
}

.wp-themesiel-blocks-button-group-components-toolbar {
	.components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) {
		margin: 2px;
		padding: 4px;
		border: 1px solid transparent;

		&:hover {
			box-shadow: inset 0 0 0 1px #555d66,inset 0 0 0 2px #fff;
		}
	}

	.components-dropdown-menu__indicator::after {
		content: "";
		pointer-events: none;
		display: block;
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-top: 5px solid currentColor;
		margin-left: 4px;
		margin-right: 2px;
	}
}

.wp-themesiel-blocks-button-group-popover-content {
	.components-popover__content {
		padding: 20px;
	}
}


@media ( max-width: 960px )  {
	.wp-block-themeisle-blocks-button-group {
		&.collapse-tablet {
			flex-direction: column;

			.wp-block-themeisle-blocks-button {
				margin: 10px 0 !important;
			}
		}
	}
}

@media ( max-width: 600px )  {
	.wp-block-themeisle-blocks-button-group {
		&.collapse-mobile {
			flex-direction: column;

			.wp-block-themeisle-blocks-button {
				margin: 10px 0 !important;
			}
		}
	}
}