/**
 * Background component
 *
 * @since    1.0.0
 */
div[data-editor-component="background"] {

	// Menu
	.tabs-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;

		border-bottom: 1px solid $color--line;
		padding-bottom: 5px;
		margin-bottom: 15px;
		margin-top: 5px;

		button {
			position: relative;
			margin-right: 5px;
			overflow: initial;
			&::before {
				content: " ";
				width: 100%;
				height: 0;
				position: absolute;
				left: 0;
				bottom: -6px;
				background-color: $color--link-hover;
			}
			svg {
				path, rect {
					transition: all 0.6s $easeOutQuart;
				}
			}
			&:focus {
				box-shadow: none;
				outline: none;
			}
			&[data-active='true'] {
				pointer-events: none;
				border-color: transparent;

				&::before { height: 2px; }

				svg {
					path { fill: $color--link-hover; }
					rect { stroke: $color--link-hover; }
				}
			}
			/* ---- hover ---- */
			&:hover {
				svg {
					path { fill: $color--link-hover; }
					rect { stroke: $color--link-hover; }
				}
			}
		}

	}

	// Content
	.tabs-content {

	}

}