/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/

$default-font: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !default;
$default-font-size: 13px !default;
$default-line-height: 1.4 !default;
$icon-button-size: 36px !default;

/* Colors */
$dark-gray-100: #8f98a1 !default;
$dark-gray-700: #32373c !default;
$light-gray-700: #ccd0d4 !default;
$white: #fff;
$blue-wordpress-700: #00669b !default;
$blue-wordpress: #0073aa !default;
$color-brand-3: #4f5969 !default;

// Widths, heights & dimensions
$item-spacing: 10px !default;

.gblocks-notice {
	margin-bottom: 20px;
}

.gblocks-panel-label .components-panel__body-toggle.components-button {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.gblocks-panel-label svg.components-panel__icon {
    margin: 0 10px 0 0;
}

.components-gblocks-control__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    align-items: center;
}

.components-panel__body .components-gblocks-control__units .components-button {
    background: #fff;
    border-color: #e2e4e7;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #6c7781;
    font-size: 10px;
    padding: 0 5px;
    position: relative;
    text-align: center;
    text-shadow: none;
	border: 1px solid;

	&.is-primary {
	    background: #0070a7;
	    border-color: #0070a7;
	    color: #fff;
	    cursor: default;
	    z-index: 1;
	}
}

.gblocks-control-tabs .components-tab-panel__tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    border-bottom: 1px solid #e8eaeb;
}

.gblocks-control-tabs .components-tab-panel__tabs button {
    padding: 9px 11px;
    padding-bottom: 11px;
    margin: 0;
    margin-bottom: -1px;
    color: #555d66;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    outline-offset: -1px;
	flex: 1;
	justify-content: center;
}

.gblocks-control-tabs .components-tab-panel__tabs button.active-tab {
    position: relative;
    border-bottom: 2px solid #00a0d2;
    z-index: 1;
	font-weight: bold;
	background: #fafafa;
}

.gblocks-block-control-icon svg {
    margin-right: 0 !important;
	margin-left: 0 !important;
    padding: 2px;
}

.gblocks-block-control-icon.gblocks-add-grid-item svg {
	padding: 0;
}

.gblocks-block-control-icon svg path {
    fill: inherit !important;
}