/* Editor-specific styles */
.widget-column-options.ck-widget {
  position: relative;
}

.widget-column-options.ck-widget::after {
  position: absolute;
  top: 0;
  right: 1rem;
  background-color: #ccc;
  color: #111;
  padding: .5em;
  font-size: .5rem;
}

/* fade label when widget is focussed */
.widget-column-options.ck-widget:has(.ck-editor__nested-editable_focused)::after  {
  opacity: .1;
}

.widget-columns-2.ck-widget::after {
  content: 'Two Columns';
}

.widget-columns-3.ck-widget::after {
  content: 'Three Columns';
}

.widget-columns-4.ck-widget::after {
  content: 'Four Columns';
}

/* General styles for columns */
@media (max-width: 767px) {

  .widget-column-options .first-child--mt-0> :first-child {
    margin-top: 1.625rem;
  }

}

@media (min-width: 768px) {

  .widget-column-options .widget--md--grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-template-rows: auto;
  }

  .widget-column-options .first-child--mt-0:nth-child(1) {
    grid-area: a;
  }

  .widget-column-options .first-child--mt-0:nth-child(2) {
    grid-area: b;
  }

  .widget-column-options .first-child--mt-0:nth-child(3) {
    grid-area: c;
  }

  .widget-column-options .first-child--mt-0:nth-child(4) {
    grid-area: d;
  }

  .widget-columns-2 .widget--md--grid,
  .widget-columns-2.align-equal .widget--md--grid {
    grid-template-areas: 'a a a a a a b b b b b b';
  }

  .widget-columns-2.align-large-left .widget--md--grid {
    grid-template-areas: 'a a a a a a a a b b b b';
  }

  .widget-columns-2.align-large-right .widget--md--grid {
    grid-template-areas: 'a a a a b b b b b b b b';
  }

  .widget-columns-3 .widget--md--grid,
  .widget-columns-3.align-equal .widget--md--grid {
    grid-template-areas: 'a a a a b b b b c c c c';
  }

  .widget-columns-3.align-large-left .widget--md--grid {
    grid-template-areas: 'a a a a a a b b b c c c';
  }

  .widget-columns-3.align-large-center .widget--md--grid {
    grid-template-areas: 'a a a b b b b b b c c c';
  }

  .widget-columns-3.align-large-right .widget--md--grid {
    grid-template-areas: 'a a a b b b c c c c c c';
  }

  .widget-columns-4 .widget--md--grid {
    grid-template-areas: 'a a a b b b c c c d d d';
  }

  .widget-columns-2.widget-keylines .first-child--mt-0:nth-child(1),
  .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(1),
  .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(2),
  .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(1),
  .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(2),
  .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(3) {
    position: relative;
  }

  .widget-columns-2.widget-keylines .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3.widget-keylines .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4.widget-keylines .first-child--mt-0:nth-child(3)::after {
    content: '';
    top: 0;
    height: 100%;
    width: 1px;
    position: absolute;
    background-color: #e0e0e0;
    right: -.75rem; /* default placement */
  }

  .widget-columns-2 .gap-0 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-0 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-0 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-0 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4 .gap-0 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-0 .first-child--mt-0:nth-child(3)::after {
    right: 0;
  }

  .widget-columns-2 .gap-4 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-4 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-4 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-4 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4 .gap-4 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-4 .first-child--mt-0:nth-child(3)::after {
    right: -.5rem
  }

  .widget-columns-2 .gap-6 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-6 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-6 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-6 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4 .gap-6 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-6 .first-child--mt-0:nth-child(3)::after {
    right: -.75rem
  }

  .widget-columns-2 .gap-8 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-8 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-8 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-8 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4 .gap-8 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-8 .first-child--mt-0:nth-child(3)::after {
    right: -1rem;
  }

  .widget-columns-2 .gap-12 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-12 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-12 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-12 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4 .gap-12 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-12 .first-child--mt-0:nth-child(3)::after {
    right: -1.5rem
  }

  .widget-columns-2.widget-gap-wide .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3.widget-gap-wide .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3.widget-gap-wide .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4.widget-gap-wide .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4.widget-gap-wide .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4.widget-gap-wide .first-child--mt-0:nth-child(3)::after,
  .widget-columns-2 .gap-16 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-16 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-3 .gap-16 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-16 .first-child--mt-0:nth-child(1)::after,
  .widget-columns-4 .gap-16 .first-child--mt-0:nth-child(2)::after,
  .widget-columns-4 .gap-16 .first-child--mt-0:nth-child(3)::after {
    right: -2rem;
  }

}