/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */


.wp-block-orphic-ui-parallax-slider-wrapper {
  position: relative!important;
  height: 100vh;
  margin-bottom: calc(100vh * (var(--section-count, 1) - 1))!important;
  
  // Custom add slide button
  .add-slide-button {
    position: absolute!important;
    top: calc(100vh * var(--section-count, 1) - 80px)!important;
    right: 20px!important;
    z-index: 1000!important;
    background: white!important;
    color: #1d2327!important;
    border: 1px solid black!important;
    padding: 8px 16px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    
    &:hover {
      color: #007cba!important;
      border-color: #007cba!important;
    }
  
    &:focus {
      box-shadow: 0 0 0 1px #1d2327, 0 0 0 3px #f3f4f6;
      outline: none;
    }
  }

  // Units positioning
  .wp-block-orphic-ui-parallax-slider-unit {
    position: absolute;
    width: 100%;
    height: 100vh;
    
    .bg {
      background-position: center center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
    }
    
    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        top: (100vh * ($i - 1));
        z-index: (999 - $i);
      }
    }
  }
}
