
$pipe-size: 96px !default;
$pipe-sticky-headers: false !default;
$pipe-vertical-padding-xs: 96px !default;
$pipe-vertical-padding-m: 48px !default;

$header-height: 96px !default;

.pipe {
  $block: &;
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  @include breakpoint(m, l) {
    min-height: calc(100vh - #{$header-height});
  }

  &--dragging {

    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }

  &__scrollable {
    position: relative;
    background: $c-pipe-background;

    @include breakpoint(m, l) {
      flex-grow: 1;
      order: 1;

      @if not $pipe-sticky-headers {
        overflow: hidden;
      }
    }
  }

  &__scroll-handle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    z-index: $z-index-pipe-scroll-handle;

    @include breakpoint(xs, s) {
      display: none;
    }

    &--right {
      left: auto;
      right: 0;
    }

    &--disabled {
      display: none;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $pipe-vertical-padding-xs 0;

    @include breakpoint(m, l) {
      flex-direction: row;
      align-items: flex-start;
      float: left;
      padding: $pipe-vertical-padding-m 48px;
      min-width: 100%;

      @include each-breakpoint(gutter) {
        padding-left: $value;
        padding-right: $value;
      }
    }
  }

  &__part-pipe {
    position: relative;
    width: $pipe-size;
    height: 56px;
    background: $c-pipe;
    border-color: $c-pipe;

    @include breakpoint(m, l) {
      width: 56px;
      height: $pipe-size;
      margin-top: 8px;
      margin-bottom: 8px;

      @if $pipe-sticky-headers {
        position: sticky;
        top: $pipe-vertical-padding-m;
      }
    }

    &:first-child::after,
    &:last-child::after {
      // arrow ends
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      border-width:
        ($pipe-size * 0.25) ($pipe-size * 0.5)
        0 ($pipe-size * 0.5);
      border-style: solid;
      border-color: inherit;

      @include breakpoint(m, l) {
        top: 0;
        bottom: 0;
        border-width:
          ($pipe-size * 0.5) 0
          ($pipe-size * 0.5) ($pipe-size * 0.25);
      }
    }

    &:first-child::after {
      // left / upper arrow end
      top: $pipe-size * -0.25;
      border-top-color: transparent;

      @include breakpoint(m, l) {
        top: auto;
        border-top-color: inherit;
        left: $pipe-size * -0.25;
        border-left-color: transparent;
      }
    }

    &:last-child::after {
      // right / bottom arrow end
      bottom: $pipe-size * -0.25;
      border-left-color: transparent;
      border-right-color: transparent;

      @include breakpoint(m, l) {
        bottom: 0;
        left: auto;
        right: $pipe-size * -0.25;
        border-top-color: transparent;
        border-right-color: inherit;
        border-bottom-color: transparent;
        border-left-color: inherit;
      }
    }
  }

  &__part-collapsed {
    display: flex;
    flex-direction: column;
    width: $pipe-size;
    padding: 4px 0;

    @include breakpoint(m, l) {
      flex-direction: row;
      height: $pipe-size;
      width: auto;
      margin: 8px 0;
      padding: 0 4px;

      @if $pipe-sticky-headers {
        position: sticky;
        top: $pipe-vertical-padding-m;
      }
    }
  }

  &__part-collapsed-fold {
    width: $pipe-size;
    height: 8px;
    margin: 4px 0;
    background: $c-pipe;

    @include breakpoint(m, l) {
      width: 8px;
      height: $pipe-size;
      margin: 0 4px;
    }
  }

  &__part-brick {
    width: 100%;
    min-width: 320px;
    max-width: 448px;
    flex-grow: 1;

    @include breakpoint(m, l) {

      max-width: 576px;
    }

    &--encoder {

      @include breakpoint(m, l) {
        max-width: 368px;
      }
    }

    @include breakpoint(s) {
      width: 448px;
    }

    @include breakpoint(m, l) {
      width: auto;
      flex-basis: 0;

      @if $pipe-sticky-headers {
        position: sticky;
        top: $pipe-vertical-padding-m - 8px;
      }
    }
  }

  &__header {
    order: 2;
    padding-top: 36px;
    padding-bottom: 32px;

    @include breakpoint(xs, s) {
      text-align: center;
    }
  }

  &__title,
  &__description,
  &__link-list {
    max-width: 600px;

    @include breakpoint(xs, s) {
      margin: 0 auto;
    }

    @include breakpoint(m, l) {
      max-width: 896px;
    }
  }

  &__title {
    display: block;
    padding: 0 0 14px;
    @extend %t-pipe-headline;
  }

  &__description {
    @extend %t-text;
  }

  &__link-list {
    margin-top: 16px;

    @include breakpoint(xs) {
      margin-top: 24px;
    }
  }

  &__btn-add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid $c-white;
    border-radius: 13px;
    text-indent: -1000px;
    z-index: 1;
    opacity: .4;
    overflow: hidden;

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 2px;
      background: $c-white;
    }

    &::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    #{$block}__part-pipe:hover & {
      opacity: 1;
    }

    #{$block}--dragging & {
      opacity: 0;
    }
  }

  &__drop-handle {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 11px;
    background: $c-pipe-background;
    transform: translate(0, -50%) translate(0, -0.5px);
    z-index: 1;
    visibility: hidden;

    @include breakpoint(m, l) {
      top: 0;
      left: 50%;
      bottom: 0;
      right: auto;
      height: auto;
      width: 11px;
      transform: translate(-50%, 0) translate(-0.5px, 0);
    }

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
    }

    &::before {
      // needle
      background: $c-pipe;

      @include breakpoint(xs, s) {
        top: 4px;
        left: -16px;
        right: -14px;
        height: 3px;
      }

      @include breakpoint(m, l) {
        left: 4px;
        top: -16px;
        bottom: -14px;
        width: 3px;
      }
    }

    &::after {
      // handle
      width: 7px;
      height: 7px;
      border-radius: 16px;
      border: 3px solid $c-pipe;
      background: $c-pipe-background;

      @include breakpoint(xs, s) {
        top: -1px;
        left: -24px;
      }

      @include breakpoint(m, l) {
        left: -1px;
        top: -24px;
      }
    }

    #{$block}__part-pipe--dragging & {

      visibility: visible;
    }
  }
}
