@import "./common.scss";

/*!
 * Bootstrap Grid v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@import "../node_modules/bootstrap/scss/bootstrap.scss";
// @import "../node_modules/bootstrap/scss/functions";
// @import "../node_modules/bootstrap/scss/variables";
// @import "../node_modules/bootstrap/scss/mixins";
// @import "../node_modules/bootstrap/scss/root";
// @import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/mixins/breakpoints";
// contents of "../node_modules/bootstrap/scss/mixins/grid-framework";

@mixin make-advanced-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // Allow columns to stretch full width below their breakpoints
    // @for $i from 1 through $columns {
    //   .col#{$infix}-#{$i} {
    //     @extend %grid-column;
    //   }
    // }
    // .col#{$infix},
    // .col#{$infix}-auto {
    //   @extend %grid-column;
    // }

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      // .col#{$infix} {
      //   flex-basis: 0;
      //   flex-grow: 1;
      //   max-width: 100%;
      // }
      // .col#{$infix}-auto {
      //   flex: 0 0 auto;
      //   width: auto;
      //   max-width: 100%; // Reset earlier grid tiers
      // }

      // @for $i from 1 through $columns {
      //   .col#{$infix}-#{$i} {
      //     @include make-col($i, $columns);
      //   }
      // }

      .order#{$infix}-first .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { order: -1; }

      .order#{$infix}-last .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { order: $columns + 1; }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { order: $i; }
      }

      // `$columns - 1` because offsetting by the width of an entire row isn't possible
      // counting up to zero for using !important flag with mobile-first breakpoints... ;)
      @for $i from -($columns - 1) through 0 {
        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
          @if ($i == 0) {
            .offset#{$infix}-#{$i} {
              @include make-advanced-col-offset($i, $columns);
            }
          } @else {
            .offset#{$infix}#{$i} {
              @include make-advanced-col-offset($i, $columns);
            }
          }
        }
      }
    }
  }
}

@mixin make-advanced-col-offset($size, $columns: $grid-columns) {
  $num: abs($size) / $columns;
  margin-left: if($num == 0, 0, percentage($num)) !important;
}

@if $enable-grid-classes {
  @include make-advanced-grid-columns();
}

// @import "../node_modules/bootstrap/scss/mixins/grid";
// @import "../node_modules/bootstrap/scss/mixins/buttons";
// @import "../node_modules/bootstrap/scss/grid";
// @import "../node_modules/bootstrap/scss/buttons";
// @import "../node_modules/bootstrap/scss/utilities/display";

// contents of: @import "../node_modules/bootstrap/scss/utilities/flex";
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .flex#{$infix}-row > .block-editor-inner-blocks > .block-editor-block-list__layout            { display: flex; flex-direction: row !important; }
    .flex#{$infix}-column > .block-editor-inner-blocks > .block-editor-block-list__layout         { display: flex; flex-direction: column !important; }
    .flex#{$infix}-row-reverse > .block-editor-inner-blocks > .block-editor-block-list__layout    { display: flex; flex-direction: row-reverse !important; }
    .flex#{$infix}-column-reverse > .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; flex-direction: column-reverse !important; }

    .flex#{$infix}-wrap > .block-editor-inner-blocks > .block-editor-block-list__layout         { display: flex; flex-wrap: wrap !important; }
    .flex#{$infix}-nowrap > .block-editor-inner-blocks > .block-editor-block-list__layout       { display: flex; flex-wrap: nowrap !important; }
    .flex#{$infix}-wrap-reverse > .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; flex-wrap: wrap-reverse !important; }
    .flex#{$infix}-fill > .block-editor-inner-blocks > .block-editor-block-list__layout         { display: flex; flex: 1 1 auto !important; }
    .flex#{$infix}-grow-0 > .block-editor-inner-blocks > .block-editor-block-list__layout       { display: flex; flex-grow: 0 !important; }
    .flex#{$infix}-grow-1 > .block-editor-inner-blocks > .block-editor-block-list__layout       { display: flex; flex-grow: 1 !important; }
    .flex#{$infix}-shrink-0 > .block-editor-inner-blocks > .block-editor-block-list__layout     { display: flex; flex-shrink: 0 !important; }
    .flex#{$infix}-shrink-1 > .block-editor-inner-blocks > .block-editor-block-list__layout     { display: flex; flex-shrink: 1 !important; }

    .justify-content#{$infix}-start > .block-editor-inner-blocks > .block-editor-block-list__layout   { display: flex; justify-content: flex-start !important; }
    .justify-content#{$infix}-end > .block-editor-inner-blocks > .block-editor-block-list__layout     { display: flex; justify-content: flex-end !important; }
    .justify-content#{$infix}-center > .block-editor-inner-blocks > .block-editor-block-list__layout  { display: flex; justify-content: center !important; }
    .justify-content#{$infix}-between > .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; justify-content: space-between !important; }
    .justify-content#{$infix}-around > .block-editor-inner-blocks > .block-editor-block-list__layout  { display: flex; justify-content: space-around !important; }

    .align-items#{$infix}-start > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]    { display: flex; align-items: flex-start !important; }
    .align-items#{$infix}-end > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]      { display: flex; align-items: flex-end !important; }
    .align-items#{$infix}-center > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]   { display: flex; align-items: center !important; }
    .align-items#{$infix}-baseline > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { display: flex; align-items: baseline !important; }
    .align-items#{$infix}-stretch > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]  { display: flex; align-items: stretch !important; }

    .align-content#{$infix}-start > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]   { display: flex; align-content: flex-start !important; }
    .align-content#{$infix}-end > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]     { display: flex; align-content: flex-end !important; }
    .align-content#{$infix}-center > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]  { display: flex; align-content: center !important; }
    .align-content#{$infix}-between > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { display: flex; align-content: space-between !important; }
    .align-content#{$infix}-around > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]  { display: flex; align-content: space-around !important; }
    .align-content#{$infix}-stretch > .block-editor-inner-blocks > .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { display: flex; align-content: stretch !important; }

    .align-self#{$infix}-auto .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]     { display: flex; align-self: auto !important; }
    .align-self#{$infix}-start .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]    { display: flex; align-self: flex-start !important; }
    .align-self#{$infix}-end .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]      { display: flex; align-self: flex-end !important; }
    .align-self#{$infix}-center .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]   { display: flex; align-self: center !important; }
    .align-self#{$infix}-baseline .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"] { display: flex; align-self: baseline !important; }
    .align-self#{$infix}-stretch .block-editor-block-list__layout [data-type="advanced-bootstrap-blocks/column"]  { display: flex; align-self: stretch !important; }
  }
}
@import "../node_modules/bootstrap/scss/utilities/spacing";

/*
 * Editor-specific Bootstrap overrides
 */
[data-type^="advanced-bootstrap-blocks/"] {
  & > .d-none,
  & > .d-sm-none,
  & > .d-md-none,
  & > .d-lg-none,
  & > .d-xl-none,
  & > .d-print-none,
  & > .modal,
  & > .collapse {
    display: block!important;
  }
  & > .modal {
    position: relative;
  }
  &:not(.is-selected):not(.has-child-selected) > .d-none,
  &:not(.is-selected):not(.has-child-selected) > .d-sm-none,
  &:not(.is-selected):not(.has-child-selected) > .d-md-none,
  &:not(.is-selected):not(.has-child-selected) > .d-lg-none,
  &:not(.is-selected):not(.has-child-selected) > .d-xl-none,
  &:not(.is-selected):not(.has-child-selected) > .d-print-none,
  &:not(.is-selected):not(.has-child-selected) > .modal,
  &:not(.is-selected):not(.has-child-selected) > .collapse {
    opacity: 50%;
  }
}

/*
 * Gutenberg Overrides
 */

.components-base-control {
  &.components-range-control {
    width: 100%;
    margin-bottom: 0 !important;
    .components-base-control__field {
      .components-base-control__label {
        // max-width: 100%; 
        width: auto;
      }
      .components-text-control__input {
      }
    }
  }
}

/*
 * Advanced Bootstrap Blocks
 */

[data-type^="advanced-bootstrap-blocks/"] {
  [data-align="left"] {
    float: left;
  }

  [data-align="right"] {
    float: right;
  }

  &.wp-block {
    max-width: 100%; 
    margin-left: initial;
    margin-right: initial;
    margin-top: 0;
    margin-bottom: 0; 
    padding-left: initial;
    padding-right: initial;
    .container, 
    .container-fluid {
      border: 1px dashed red; 
      padding: 0; 
      width: auto; 
    }
  }
  .block-list-appender {
    margin: 0 !important; 
  }
}
[data-type="advanced-bootstrap-blocks/container"] {
  &.wp-block {
    margin-top: 14px;
    &.is-drop-target {
      margin-top: 28px;
    }
  }
}
[data-type="advanced-bootstrap-blocks/container"],
[data-type="advanced-bootstrap-blocks/row"],
[data-type="advanced-bootstrap-blocks/jumbotron"] {
  padding: 0 !important; 
  .block-editor-inner-blocks > .block-editor-block-list__layout {
    @include make-container();
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .block-editor {
    box-sizing: border-box !important;
  }
  &.block-editor-block-list__block {
    padding: 0;
    &.wp-block.container-fluid {
      max-width: 100%; 
    }
  }
  .block-editor-block-list__block {
    max-width: 100%;
    width: 100%; 
  }
}
[data-type="advanced-bootstrap-blocks/container"],
[data-type="advanced-bootstrap-blocks/card"],
[data-type="advanced-bootstrap-blocks/jumbotron"] {
  > .block-editor-block-list__block-edit {
    padding: 0 !important; 
    margin: 0 !important;
  }
  > .container, > .container-fluid {
    > [data-block] {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
[data-type="advanced-bootstrap-blocks/row"],
[data-type="advanced-bootstrap-blocks/jumbotron"] {
  max-width: 100%; 
  width: 100%;
  padding: 0; 
  
  .block-editor-block-list__block-edit {
    padding: 0 !important; 
    margin: 0 !important; 
    width: 100%; 
    max-width: 100%; 
    > [data-block] {
      margin: 0;
    }
  }
  > div:not(.block-editor-block-list__block-edit) {
    width: 100%; 
  }
  > .block-editor-block-list__block-edit > [data-block] > div, // 5.2
  > div:not(.block-editor-block-list__block-edit):not(.block-editor-block-list__insertion-point) { // 5.3+
    border: 1px dashed orange; 
    > .block-editor-inner-blocks > .block-editor-block-list__layout {
      @include make-row();
      margin-left: 0 !important;
      margin-right: 0 !important; 
      > .block-list-appender {
        &:not(:first-child) { 
          position: absolute;
          top: 8px;
          right: 8px;
        }
        outline: none;
        .block-list-appender__toggle {
          padding: 8px;
          // border: 0;
          outline: 0;
          &:focus {
            outline: 1px solid;
          }
        }
      }
    }
  }
}

[data-type="advanced-bootstrap-blocks/column"] {
  word-break: break-word;

  [data-type="core/heading"],
  [data-type="core/paragraph"] {
    margin: initial; 
    padding: initial;
    &.is-selected {}
  }
  
  &.col {
    border: 1px dashed green; 
  }

  [data-type="core/heading"] + [data-type="core/paragraph"] {

  }
  [data-type="core/paragraph"] + [data-type="core/paragraph"] {

  }

  > div {
    p:empty {
      display: none; 
    }
    .wp-block-cover, .wp-block-cover-image {
      margin: 0; 
    }
  }
}

[data-type="advanced-bootstrap-blocks/accordion"] {
  border: 1px dashed purple;
}

[data-type="advanced-bootstrap-blocks/accordion"],
[data-type^="advanced-bootstrap-blocks/card"] {
  .block-list-appender,
  .block-editor-default-block-appender {
    display: none;
    .block-editor-button-block-appender,
    .block-list-appender__toggle {
      &:focus {

      }
    }
  }
  &.is-selected > .block-editor-inner-blocks > .block-editor-block-list__layout,
  &.is-selected > div > .block-editor-inner-blocks > .block-editor-block-list__layout {
    .block-list-appender,
    .block-editor-default-block-appender {
      display: block;
    }
  }
}

[data-type="advanced-bootstrap-blocks/card"] {
  &.wp-block,
  > .block-editor-inner-blocks > .block-editor-block-list__layout,
  > .block-editor-block-list__block-edit > [data-block] > .block-editor-inner-blocks > .block-editor-block-list__layout {
    padding: 0;
  }
}
[data-type="advanced-bootstrap-blocks/card-header"] {
  [data-type="core/heading"] {
    h1,h2,h3,h4,h5,h6,p {
      margin-top: 0; 
    }
  }
  > [data-type="core/paragraph"] {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
  }
}
[data-type="advanced-bootstrap-blocks/button-group"] {
  .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    > .block-list-appender {
      &:not(:first-child) { 
        position: absolute;
        top: -15px;
        right: -20px;
      }
    }
    .block-editor-block-list__block {
      display: inline-block;
      width: auto;
      margin: 0;
    }
  }
}
[data-type="advanced-bootstrap-blocks/button"] {
  .block-editor-url-input__button {

  }
  .block-editor-url-input__button-modal {
    position: absolute; 
    right: 0;
    top: 0;
    margin: 0 auto; 
    max-width: 320px;
    z-index: 30; 
    border-radius: 3px; 
  }
  .block-editor-url-input__button-modal-line {
    align-items: center; 
  }
  .block-editor-url-input {
    > .components-base-control__field {
      margin-bottom: 0; 
      > input[type="text"] {
        width: 100%; 
      }
    }
  }
}

.block-editor-block-list__layout {
  @media (min-width: 600px) {
    padding-left: 85px;
    padding-right: 85px;
  }
  .block-editor-block-list__block {
    .block-editor-block-list__block-edit:before {
      left: 0;
      right: 0;
      bottom: 0;
      top: 0; 
    }
  }
  .block-editor-block-list__block[data-align=full] {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0; 
    padding-right: 0; 
    .components-disabled {
      .block-editor-inserter { display: none; }
    }
    .block-editor-block-list__block-edit {
      margin-left: -32px;
      margin-right: -32px;
    }
    .block-editor-block-list__layout .block-editor-block-list__block {
      padding-left: 28px;
      padding-right: 28px;
      padding-top: 15px;
      padding-bottom: 15px;
      &[data-type="advanced-bootstrap-blocks/column"] {
        padding-right: 0; 
        padding-left: 0;
        &:first-child {
          padding-left: 15px; 
        }
        & + [data-type="advanced-bootstrap-blocks/column"] {

        }
        &:last-child {
          padding-right: 15px; 
        }
      }
    }
  }
  .block-editor-default-block-appender > .block-editor-default-block-appender__content {
    margin-top: 0;
    margin-bottom: 0; 
  }
}