@use '../../01-core' as *;
:root {
  /* establish a default for calculations */
  --base-section-margin: var(--grid-gap);
  /* use that default as the default spacing */
  --section-margin: var(--base-section-margin);
  --section-line-translate: calc(var(--section-margin) * 0.5);
  --layout-max-width-narrow: calc(100vw - 2rem);
}
.uw-section-spacing {
  &--75 {
    --section-margin: calc(var(--base-section-margin) * 0.75);
    --section-line-translate: calc(var(--section-margin) * 0.5);
    &.layout {
      margin-bottom: var(--section-margin);
      &.card__media {
        margin-bottom: 0 !important;
      }
      &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
        &::before {
          transform: translate(0, var(--section-line-translate));
        }
      }
    }
  }
  &--50 {
    --section-margin: calc(var(--base-section-margin) * 0.5);
    --section-line-translate: calc(var(--section-margin) * 0.5);
    &.layout {
      margin-bottom: var(--section-margin);
      &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
        &::before {
          transform: translate(0, var(--section-line-translate));
        }
      }
    }
  }
  &--25 {
    --section-margin: calc(var(--base-section-margin) * 0.25);
    --section-line-translate: calc(var(--section-margin) * 0.5);
    &.layout {
      margin-bottom: var(--section-margin);
      &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
        &::before {
          transform: translate(0, var(--section-line-translate));
        }
      }
    }
  }
  &--none {
    --section-margin: 0;
    &.layout {
      margin-bottom: var(--section-margin);
    }
  }
  &--default {
    --section-margin: var(--base-section-margin);
    &.layout{
      margin-bottom: var(--section-margin);
      &.uw-section-separator--bottom:not(.is-layout-builder-highlighted) {
        &::before {
          transform: translate(0, var(--section-line-translate));
        }
      }
    }
  }
  &.layout  {
    &.card__media {
      margin-bottom: 0 !important;
    }
  }
}
// Section seperators.
.uw-section-separator {
  &--none {
    //--layout-border-width: 0;
    //border-color: var(--layout-border-color);
    //border-style: var(--layout-border-style);
    //border-bottom-width: var(--layout-border-width);
  }
  &--bottom {
    --layout-border-width: var(--size-xs);
    position: relative;
    &:not(.is-layout-builder-highlighted){
      &::before {
        bottom: 0;
        content: '';
        position: absolute;
        background-color: var(--layout-show-bottom-color);
        height: var(--layout-border-width);
        left: 0;
        width: 100%;
      }
    }
    &.uw-column-separator--none {
      &::before {
        transform: translate(0, 0);
      }
    }
    &:last-of-type {
      &::before {
        bottom: 0;
        transform: translate(0, 0);
      }
    }
  }
  &--narrow {
    --layout-border-width: var(--size-xs);
    position: relative;
    &::before {
      bottom: 0;
      content: '';
      position: absolute;
      background-color: var(--layout-show-seperator-color);
      height: var(--layout-border-width);
      left: 0;
      transform: translate(0, var(--section-line-translate));
      width: 100%;
      @media(min-width: $screen-md) {
        display: none;
      }
    }
    &.uw-column-separator--narrow {
      &::before {
        bottom: 0 !important;
        @media(min-width: $screen-md) {
          display: none;
        }
      }
    }
    &:last-of-type {
      &::before {
        bottom: 0;
      }
    }
  }
}

.layout {
  --layout-border-width: var(--size-xs);
  @include uw-contained-width(var(--layout-max-width-narrow));
  @media(min-width: $screen-xl) {
    @include uw-contained-width(var(--layout-max-width));
  }
  &.card__media {
    padding: 0 var(--size-2);
    @media(min-width: $screen-xl) {
      padding: 0;
    }
  }
  &.uw-contained-width {
    @include uw-contained-width(var(--layout-max-width-narrow));
    @media(min-width: $screen-xl) {
      // Reset the width so we use all the width when we have room to.
      @include uw-contained-width(var(--layout-max-width));
    }
    &.card__media {
      max-width: var(--layout-max-width);
    }
    &--narrow {
      /* Match the width of WCMS2's narrow: 496px */
      max-width: 31rem;
    }

    &--wide {
      /* Match the width of WCMS2's wide: 753px */
      max-width: 47.0625rem;
    }
  }
  &.uw-full-width {
    @include uw-full-width-padding;
    overflow: hidden;

    .uw-caption{
      > p{
        padding-left: var(--size-2);
      }
    }

    .uw-section-has-full-width.uw-node__with-sidebar & {
      padding: 0  var(--size-1) !important;
    }

    .dashboards-container & {
      @include uw-full-width;
      margin-bottom: var(--grid-gap);
      overflow: visible; /* otherwise, dropdowns truncate at the border. */
    }

    .layout-builder & {
      padding: var(--size-2);
    }

    .layout-builder__region {
      padding: var(--size-1) 0 0;
    }
    &.layout--uw-1-col{
      .block-inline-blockuw-cbl-banner-images,
      .block-inline-blockuw-cbl-image,
      .block-uw-cbl-image,
      .block-inline-blockuw-cbl-remote-video,
      .block-inline-blockuw-cbl-image-gallery {
        @include uw-full-width-margin;

        .layout-builder &{
          @include uw-full-width-reset;
          margin-left: 0;
          margin-right: 0;
        }

        h2{
          margin-left: var(--size-2);
        }

        .uw-section-has-full-width.uw-node__with-sidebar & {
          @include uw-full-width-reset;
        }
      }
      .block-inline-blockuw-cbl-google-maps {
        @include uw-contained-width;

        @media(min-width: $screen-md) {
          @include uw-full-width-margin;
        }

        .layout-builder &{
          @include uw-full-width-reset;
          margin-left: 0;
          margin-right: 0;
        }

        .uw-section-has-full-width.uw-node__with-sidebar & {
          @include uw-full-width-reset;
        }

        h2{
          margin-left: var(--size-2);
        }
      }
    }

    &.layout--uw-inverted-l-right,
    &.layout--uw-inverted-l-left {
      //@include uw-full-width-padding;
      //overflow: hidden;
    }

    &.card__media {
      padding: 0;
    }
  }

  // When wrapped with class to identify sidebar
  .uw-node__with-sidebar & {
    margin: inherit;

    @media(min-width: $screen-md) {
      @include uw-contained-width;
    }

    &.uw-contained-width {
      @include uw-contained-width;
      margin: inherit;
      padding: var(--size-1);

      @media(min-width: $screen-xxl) {
        padding: var(--size-1) 0;
      }

      &--narrow {
        /* Match the width of WCMS2's narrow: 496px */
        margin: inherit;
      }

      &--wide {
        /* Match the width of WCMS2's wide: 753px */
        margin: inherit;
      }
    }
  }

  // Column separator css.
  &--uw-2-col {
    &.uw-column-separator {
      &--between {
        .layout__region {
          position: relative;
          &--first {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-md) {
              &::before {
                content: '';
                position: absolute;
                background-color: var(--layout-show-seperator-color);
                width: var(--layout-border-width);
                height: 100%;
                bottom: 0;
                transform: inherit;
                left: inherit;
                right: -1rem;
              }
            }
          }
        }
      }
      &--narrow {
        .layout__region {
          position: relative;
          &--first {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              left: 0;
            }
            @media(min-width: $screen-md) {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
  &--uw-3-col {
    &.uw-column-separator {
      &--between {
        .layout__region {
          position: relative;
          &--first {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              left: 0;
            }
            @media(min-width: $screen-md) {
              &::before {
                content: '';
                position: absolute;
                background-color: var(--layout-show-seperator-color);
                width: var(--layout-border-width);
                height: 100%;
                bottom: 0;
                left: inherit;
                right: -1rem;
              }
            }
          }
          &--second {
            &::before {
              background-color: var(--layout-show-seperator-color);
              bottom: 0;
              content: '';
              height: var(--layout-border-width);
              left: 0;
              position: absolute;
              width: 100%;
            }
            @media(min-width: $screen-md) {
              &::before {
                background-color: var(--layout-show-seperator-color);
                bottom: 0;
                content: '';
                height: 100%;
                left: inherit;
                position: absolute;
                right: -1rem;
                width: var(--layout-border-width);
              }
            }
          }
          &--third {
            //
          }
        }
      }
      &--narrow {
        .layout__region {
          position: relative;
          &--first {
            &::before {
              background-color: var(--layout-show-seperator-color);
              bottom: 0;
              content: '';
              height: var(--layout-border-width);
              left: 0;
              position: absolute;
              transform: translate(0, var(--section-line-translate));
              width: 100%;
            }
            @media(min-width: $screen-md) {
              &::before {
                display: none;
              }
            }
          }
          &--second {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-md) {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
  &--uw-4-col {
    &.uw-column-separator {
      &--between {
        .layout__region {
          position: relative;
          &--first {
            &::after {
              bottom: 0;
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              left: 0;
              right: inherit;
              transform: translate(0, var(--section-line-translate));
            }
            &::before {
              @media(min-width: $screen-sm) {
                background-color: var(--layout-show-seperator-color);
                bottom: 0;
                content: '';
                height: 100%;
                left: inherit;
                position: absolute;
                right: -1rem;
                width: var(--size-xs);
              }
            }
            @media(min-width: $screen-lg) {
              &::after {
                display: none;
              }
            }
          }
          &--second {
            &::before {
              background-color: var(--layout-show-seperator-color);
              bottom: 0;
              content: '';
              height: var(--layout-border-width);
              left: 0;
              position: absolute;
              transform: translate(0, var(--section-line-translate));
              width: 100%;
            }
            @media(min-width: $screen-lg) {
              &::before {
                background-color: var(--layout-show-seperator-color);
                bottom: 0;
                content: '';
                height: 100%;
                left: inherit;
                position: absolute;
                right: -1rem;
                transform: translate(0, 0);
                width: var(--size-xs);
              }
            }
          }
          &--third {
            &::before {
              bottom: 0;
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              left: 0;
            }
            @media(min-width: $screen-sm) {
              &::before {
                background-color: var(--layout-show-seperator-color);
                bottom: 0;
                content: '';
                position: absolute;
                height: 100%;
                left: inherit;
                right: -1rem;
                width: var(--size-xs);
              }
            }
          }
        }
      }
      &--narrow {
        .layout__region {
          position: relative;
          &--first {
            &::after {
              bottom: 0;
              @media(min-width: $screen-sm) {
                transform: translate(0, var(--section-line-translate));
              }
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              left: 0;
              right: inherit;
            }
            &::before {
              background-color: var(--layout-show-seperator-color);
              bottom: 0;
              content: '';
              height: 100%;
              left: inherit;
              position: absolute;
              right: -1rem;
              width: var(--size-xs);
            }
            @media(min-width: $screen-lg) {
              &::after,
              &::before{
                display: none;
              }
            }
          }
          &--second {
            &::before {
              background-color: var(--layout-show-seperator-color);
              bottom: 0;
              @media(min-width: $screen-sm) {
                bottom: -1rem;
              }
              content: '';
              height: var(--layout-border-width);
              left: 0;
              position: absolute;
              width: 100%;
            }
            @media(min-width: $screen-lg) {
              &::after,
              &::before{
                display: none;
              }
            }
          }
          &--third {
            &::before {
              bottom: 0;
              @media(min-width: $screen-sm) {
                transform: translate(0, var(--section-line-translate));
              }
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              left: 0;
            }
            @media(min-width: $screen-sm) {
              &::before {
                background-color: var(--layout-show-seperator-color);
                bottom: 0;
                content: '';
                position: absolute;
                height: 100%;
                left: inherit;
                right: -1rem;
                width: var(--size-xs);
              }
            }
            @media(min-width: $screen-lg) {
              &::after,
              &::before{
                display: none;
              }
            }
          }
        }
      }
    }
  }
  &--uw-inverted-l-right {
    &.uw-column-separator {
      &--between {
        .layout__region {
          position: relative;
          &--first {
            &::after {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
              right: inherit;
            }
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: var(--size-xs);
              height: 100%;
              bottom: 0;
              left: inherit;
              right: -1rem;
            }
            @media(min-width: $screen-lg) {
              &::after {
                display: none;
              }
            }
          }
          &--second {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-lg) {
              &::before {
                content: '';
                position: absolute;
                background-color: var(--layout-show-seperator-color);
                width: var(--size-xs);
                height: 100%;
                bottom: 0;
                transform: translate(0, 0);
                left: inherit;
                right: -1rem;
              }
            }
          }
          &--third {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-sm) {
              &::before {
                content: '';
                position: absolute;
                background-color: var(--layout-show-seperator-color);
                width: var(--size-xs);
                height: 100%;
                bottom: 0;
                transform: translate(0, 0);
                left: inherit;
                right: -1rem;
              }
            }
          }
        }
      }
      &--narrow {
        //
      }
    }
  }
  &--uw-inverted-l-left {
    &.uw-column-separator {
      &--between {
        .layout__region {
          position: relative;
          &--first {
            &::after {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
              right: inherit;
            }

            @media(min-width: $screen-lg) {
              &::after {
                display: none;
              }
              &::before {
                content: '';
                position: absolute;
                background-color: var(--layout-show-seperator-color);
                width: var(--size-xs);
                height: 100%;
                bottom: 0;
                transform: translate(0, 0);
                left: inherit;
                right: -1rem;
              }
            }
          }

          &--second{
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-lg) {
              &::before {
                content: '';
                position: absolute;
                background-color: var(--layout-show-seperator-color);
                width: var(--size-xs);
                height: 100%;
                bottom: 0;
                transform: translate(0, 0);
                left: inherit;
                right: -1rem;
              }
            }
          }
          &--third {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-lg) {
              &::before {
                display: none;
              }
            }
          }
        }
      }
      &--narrow {
        .layout__region {
          position: relative;
          &--first {
            &::after {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
              right: inherit;
            }
            @media(min-width: $screen-lg) {
              &::after {
                display: none;
              }
            }
          }
          &--second {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-lg) {
              &::before {
                display: none;
              }
            }
          }
          &--third {
            &::before {
              content: '';
              position: absolute;
              background-color: var(--layout-show-seperator-color);
              width: 100%;
              height: var(--layout-border-width);
              bottom: 0;
              transform: translate(0, var(--section-line-translate));
              left: 0;
            }
            @media(min-width: $screen-lg) {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
// Set default spacing to match old block margin if no classes
.layout.layout--uw-1-col {
  &:not(.uw-section-spacing--default, .uw-section-spacing--none, .uw-section-spacing--75, .uw-section-spacing--50, .uw-section-spacing--25) {
    margin-bottom: var(--section-margin);
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.uw-section-has-full-width .layout.layout--uw-1-col {
  overflow: hidden;
}

.uw-full-width.uw-section-spacing--none + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom.uw-column-separator--between + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--bottom.uw-column-separator--narrow + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--between + .uw-column-separator--between,
.uw-section-spacing--none.uw-section-separator--narrow.uw-column-separator--narrow + .uw-column-separator--narrow,
.uw-section-spacing--none.uw-section-separator--bottom + .layout--uw-1-col {
  .layout__region {
    padding-bottom: var(--size-2);
    padding-top: var(--size-2);
    //&:nth-of-type(3),
    //&:nth-of-type(4){
    //  padding-bottom: 0;
    //  padding-top: 0;
    //}
    //@media(min-width: $screen-lg) {
    //  &:nth-of-type(3),
    //  &:nth-of-type(4){
    //    padding-bottom: var(--size-2);
    //    padding-top: var(--size-2);
    //  }
    //}
  }
}

.uw-section-spacing--none.uw-section-separator--bottom + .uw-column-separator--narrow {
  .layout__region {
    padding-top: var(--size-2);
    @media(min-width: $screen-lg) {
      padding-top: 0;
    }
  }
}