.wp-block[data-type="bootstrap-blocks/column"] {
  &:focus:after {
	display: none;
  }
  .bs-resizable-col {
	&:not(.resize-active) {
	  width: auto !important;
	}
  }
  .resize-active {
	.sizer {
	  display: none;
	}
  }
  .col-toolbar {
	position: absolute;
	width: 100%;
	font-size: 12px;
	top: 8px;
	display: flex;
	justify-content: space-between;
	.col-title {
	  font-weight: bold;
	  color: rgba(25,30,35,.3);
	  line-height: 12px;
	  margin-right: 15px;
	}
	.sizer {
	  margin-right: 15px;
	}
	.col-sizer {
	  font-size: 9px;

	  line-height: 11px;
	  letter-spacing: 1px;
	  text-transform: uppercase;
	  padding: 2px 4px 1px 4px;
	  margin: 0 1px;
	  margin-right: 2px;
	  display: inline-block;
	  background-color: rgba(25,30,35,.3);
	  color: rgba(255,255,255,.8);
	  border-radius: 2px;
	}
  }
  .bs-column {
	position: relative;
	padding-top: 20px;
	.custom-handle {
	  position: absolute;
	  cursor: col-resize;
	  display: none;
	  width: 10px;
	  height: 10px;
	  bottom: -2px;
	  right: -2px;
	  border-right: 4px solid #007bff;
	  border-bottom: 4px solid #007bff;
	}
	&:hover {
	  border: 2px dashed rgba(0, 0, 0, 0.8);
	  .custom-handle {
		display: block;
	  }
	}
  }
  &.is-selected {
	.col-toolbar {
	  .col-title {
		color: #191e23;
	  }
	}
	.bs-column {
	  border: 2px dashed;
	  .custom-handle {
		display: block;
	  }
	}
  }
}
.bs-column-breakpoint {
  width: 100%;
  text-align: center;
  .bs-breakpoint-view {
	cursor: pointer;
	svg {
	  width: 26px;
	}
  }
  .bs-breakpoint-value {
	svg:first-child {
	  height: 26px;
	  width: 28px;
	}
	.css-1einvap-DownArrowWrapper svg {
	  width: 18px;
	  height: 18px;
	}
  }
}
@for $i from 1 through 12 {
  $size: 12 / $i;
  .wp-block[data-bs-active="#{$i}"]:not(.resize-active) {
	flex: 0 0 100% / $size;
	width: 100% / $size;
  }

}