/**
 * Editor styles for the admin
 */

.ab-layout-column-wrap-admin,
.ab-block-layout-column-inner .block-editor-inner-blocks {
  position: relative;
  z-index: 1;
}

.editor-styles-wrapper [data-type="atomic-blocks/ab-columns"] .wp-block {
  max-width: 100%;
}

.edit-post-visual-editor
  .editor-block-list__block
  [data-type="atomic-blocks/ab-column"],
.edit-post-visual-editor
  .block-editor-block-list__block
  [data-type="atomic-blocks/ab-column"] {
  margin-left: 0;
  margin-right: 0;
}

.ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 0 2em;
  min-height: 0;
}

/* Grid gap classes */

.ab-block-layout-column-gap-0
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-0
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 0;
}

.ab-block-layout-column-gap-1
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-1
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 1em;
}

.ab-block-layout-column-gap-2
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-2
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 2em;
}

.ab-block-layout-column-gap-3
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-3
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 3em;
}

.ab-block-layout-column-gap-4
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-4
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 4em;
}

.ab-block-layout-column-gap-5
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-5
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 5em;
}

.ab-block-layout-column-gap-6
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-6
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 6em;
}

.ab-block-layout-column-gap-7
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-7
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 7em;
}

.ab-block-layout-column-gap-8
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-8
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 8em;
}

.ab-block-layout-column-gap-9
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-9
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 9em;
}

.ab-block-layout-column-gap-10
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-block-layout-column-gap-10
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  grid-gap: 0 10em;
}

/* Grid column classes. */

/* IE 11 support - Rows and column location must be explicitly defined. */

.ab-layout-column-wrap-admin
  .editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(1),
.ab-layout-column-wrap-admin
  .block-editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: col1;
}

.ab-layout-column-wrap-admin
  .editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(2),
.ab-layout-column-wrap-admin
  .block-editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col2;
}

.ab-layout-column-wrap-admin
  .editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(3),
.ab-layout-column-wrap-admin
  .block-editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: col3;
}

.ab-layout-column-wrap-admin
  .editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(4),
.ab-layout-column-wrap-admin
  .block-editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: col4;
}

.ab-layout-column-wrap-admin
  .editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(5),
.ab-layout-column-wrap-admin
  .block-editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(5) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: col5;
}

.ab-layout-column-wrap-admin
  .editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(6),
.ab-layout-column-wrap-admin
  .block-editor-block-list__layout
  [data-type="atomic-blocks/ab-column"]:nth-child(6) {
  -ms-grid-row: 1;
  -ms-grid-column: 6;
  grid-area: col6;
}

/* One column grid. */

.ab-layout-columns-1
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-columns-1
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "col1";
}

/* Two column grid. */

.ab-layout-columns-2
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-columns-2
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "col1 col2";
}

.ab-2-col-wideleft
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-2-col-wideleft
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 2fr 1fr;
  grid-template-columns: 2fr 1fr;
}

.ab-2-col-wideright
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-2-col-wideright
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}

/* Three column grid. */

.ab-layout-columns-3
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-columns-3
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "col1 col2 col3";
}

.ab-3-col-widecenter
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-3-col-widecenter
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
}

.ab-3-col-wideleft
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-3-col-wideleft
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 2fr 1fr 1fr;
  grid-template-columns: 2fr 1fr 1fr;
}

.ab-3-col-wideright
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-3-col-wideright
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr 2fr;
  grid-template-columns: 1fr 1fr 2fr;
}

/* Four column grid. */

.ab-layout-columns-4
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-columns-4
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "col1 col2 col3 col4";
}

.ab-4-col-wideleft
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-4-col-wideleft
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 2fr 1fr 1fr 1fr;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.ab-4-col-wideright
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-4-col-wideright
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr 1fr 2fr;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

/* Five column grid. */

.ab-layout-columns-5
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-columns-5
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "col1 col2 col3 col4 col5";
}

.ab-layout-columns-6
  > .ab-layout-column-wrap-admin
  > .editor-inner-blocks
  > .editor-block-list__layout,
.ab-layout-columns-6
  > .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "col1 col2 col3 col4 col5 col6";
}

.block-editor .ab-layout-columns-4,
.block-editor .ab-layout-columns-5,
.block-editor .ab-layout-columns-6 {
  overflow-x: visible;
}

/* Alignment styles */

.ab-block-layout-column .editor-block-list__block[data-align="full"],
.ab-block-layout-column .block-editor-block-list__block[data-align="wide"],
.ab-block-layout-column .editor-block-list__block[data-align="full"],
.ab-block-layout-column .block-editor-block-list__block[data-align="wide"] {
  margin-left: auto;
  margin-right: auto;
}

[data-type="atomic-blocks/ab-column"] {
  &.ab-is-vertically-aligned-top {
    align-self: flex-start;
  }

  &.ab-is-vertically-aligned-center {
    align-self: center;
  }

  &.ab-is-vertically-aligned-bottom {
    align-self: flex-end;
  }
}

[data-type="atomic-blocks/ab-columns"] {
  .components-placeholder {
    padding: 30px;
  }

  .components-placeholder__fieldset {
    max-width: 100%;
  }
}

.ab-column-selector-button-back {
  line-height: 1.4;
  display: block;
  vertical-align: middle;
  width: 100%;
  border-radius: 3px;
  margin: 25px auto 0 auto;

  &:hover {
    color: #007cba;
  }

  &:active,
  &:focus,
  &:focus:enabled {
    background-color: transparent;
    box-shadow: none;
  }

  &:before {
    content: "\2190";
    margin-right: 5px;
  }

  svg {
    width: 16px;
    margin-right: 5px;
  }
}

.ab-column-select-panel {
  .components-button-group {
    margin-bottom: 4px;
  }
  .components-button.is-small {
    height: auto;
    padding: 8px;
    margin: 0 5px 5px 0;
  }
  .components-base-control__field + .components-base-control__help {
    margin-top: 8px;
  }
}

.ab-columns-center .ab-layout-column-wrap-admin {
  margin: 0 auto;
}

.ab-block-layout-column .wp-block-image,
.ab-block-layout-column .wp-block-image .components-resizable-box__container {
  max-width: 100% !important;
}

.is-button.ab-inspector-icon-button {
  display: inline-flex;
  margin-top: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 40px;
}

.ab-background-button-group {
  margin-bottom: 25px;
}

/**
 * Stopgap styles to improve usability of controls on full width alignment
 */
[data-type="atomic-blocks/ab-columns"][data-align="full"]
  .ab-layout-column-wrap-admin
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  padding-left: 58px;
  padding-right: 58px;
}