/** Tab Block Styles */

.wp-block-hb-tabs {
	position: relative;
	margin: 1em 0;

	.wp-block-hb-tabs__nav {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
		    
		@media screen and (min-width: 600px) {
			display: inline-flex;
			flex-wrap: nowrap;			
		}
		
		li {
			position: relative;
			padding: .8em 1em;
			margin: 0 0 -1px;
			background: #f0f2f5;
			border-top: 1px solid #e6e8eb;
			border-right: 1px solid #e6e8eb;
			color: #333;
			white-space: nowrap;
			line-height: 1;

			&:hover {
				.wp-block-hb-tabs__remove_btn {
					opacity: 1;
				}
			}

			@media screen and (max-width: 599px) {
				width: 100%;
				&:last-child {
					border-bottom: 1px solid #e6e8eb;
				}
			}

			&:first-child {
				border-left: 1px solid #e6e8eb;
			}

			&[data-hb-tabs-tab--state="inactive"] {
				&:hover {
					cursor: pointer;
				}
			}
			&[data-hb-tabs-tab--state="active"] {

				background: #fff;
				span {
					font-weight: bolder;
				}
			}

			// Admin: Add tab btn;
			&.wp-block-hb-tabs__add_tab {
				display: flex;
    			align-items: center;
				padding: 0;
				margin-left: -1px;
				opacity: 0;
				transition: .3s ease-in-out;

				.wp-block-hb-tabs__add_btn {
			    	display: none;		    	
			    	padding: 10px;
			    	position: relative;
	    			top: -2px;
			    }
			    
			    svg {
			    	display: block;
			    }
			}

		}

		a {
			display: block;
			text-decoration: none;
			color: #333;
		}
		
	}

	.wp-block-hb-tabs__remove_btn {
		position: absolute;
	    top: 3px;
	    right: 3px;
	    opacity: 0;
	    transition: .15s ease-in-out;    
	}
	
	.wp-block-hb-tabs__content {
		padding: .25em 1em;
		border: 1px solid #e6e8eb;
		display: none;
		
		&[data-hb-tabs-tab--state="active"] {
			display: block;
		}
	}

}

.is-selected .wp-block-hb-tabs {

	li.wp-block-hb-tabs__add_tab {
		opacity: 1;
		margin-left: auto;

		.wp-block-hb-tabs__add_btn {
			display: block;
		}
	}

}