@import '../../../scss/styles.scss';

//////////////////////
// COMPONENT STYLES
//////////////////////

.draggable-section {
  padding-bottom: base(.5);

  .draggable-section {
    padding-bottom: 0;
  }

  &__content-wrapper {
    display: flex;
    position: relative;
    margin-bottom: $baseline;
  }

  &__section-header {
    @include blur-bg(white);
    display: flex;
    position: sticky;
    top: $top-header-offset;
    z-index: 1;
    padding: base(.75) base(.75);
    margin-left: - base(.75);
    margin-right: - base(.75);
    width: calc(100% + #{base(1.5)});

    .toggle-collapse {
      margin: 0 0 0 auto;
      transform: rotate(.5turn);

      .btn__icon {
        background-color: white;
      }

      &--is-collapsed {
        transform: rotate(0turn);
      }
    }
  }

  &__render-fields-wrapper {
    flex-grow: 1;
  }

  &.is-hovered > div {
    > .field-type-gutter {
      &.actions {

        .field-type-gutter__content {
          &:hover {
            z-index: $z-nav;
          }
        }

        .field-type-gutter__content-container {
          box-shadow: none;
        }
      }
      .field-type-gutter__content-container {
        box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
      }

      .position-panel__move-forward,
      .position-panel__move-backward {
        opacity: 1;

        &.first-row,
        &.last-row {
          opacity: .15;
          pointer-events: none;
        }
      }

      .position-panel__current-position {
        color: $color-dark-gray;
      }
    }

    .toggle-collapse {
      @include color-svg(white);

      .btn__icon {
        background-color: $color-gray;

        &:hover {
          background-color: $color-dark-gray;
        }
      }
    }
  }

  label.field-label {
    line-height: 1;
    padding-bottom: base(.75)
  }

  @include mid-break {
    min-width: base(16);

    .position-panel__move-forward,
    .position-panel__move-backward {
      opacity: 1;
    }

    &__section-header {
      top: $top-header-offset-m;
    }
  }
}
