@separator-border-color: #E7E6E6;
@separator-border-width: 1px;

.separator-border-mixin(@sep-border-color, @sep-border-opacity, @sep-border-start, @sep-border-end) {
  @rgba0: rgba(@sep-border-color, @sep-border-color, @sep-border-color, 0);
  @rgba-op: rgba(@sep-border-color, @sep-border-color, @sep-border-color, @sep-border-opacity);
  background: none;
  background: linear-gradient(left, @rgba0 0%, @rgba0 @sep-border-start, @rgba-op 50%, @rgba0 @sep-border-end, @rgba0 100%);
}

.fusion-sep-clear {
  clear: both;
  display: block;
  height: 1px;
  font-size: 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
}

.fusion-separator {
  border: 0 solid @separator-border-color;
  clear: both;
  position: relative;
  z-index: 11;
}

.fusion-body {
  .fusion-separator {
    &.sep-none {
      height: 1px;
      border-color: transparent;
    }
  }

  .fusion-content-sep {
    &.sep-none {
      display: none;
    }
  }

  .fusion-content-sep,
  .fusion-separator {
    &.sep-double {
      height: 6px;
      border-bottom-width: @separator-border-width;
      border-top-width: @separator-border-width;
      box-sizing: content-box;
    }

    &.sep-single {
      height: auto;
      border-top-width: @separator-border-width;
      border-bottom-width: 0;
    }

    &.sep-solid {
      border-bottom-style: solid;
      border-top-style: solid;
    }

    &.sep-dashed {
      border-bottom-style: dashed;
      border-top-style: dashed;
    }

    &.sep-dotted {
      border-bottom-style: dotted;
      border-top-style: dotted;
    }

    &.sep-transparent {
      border: none;
    }

    &.sep-shadow {
      height: 1px;
      overflow: visible;
      border: none;
      .separator-border-mixin(150, 0.65, 15%, 85%);

      &:after {
        display: block;
        margin-top: 10px;
        height: 6px;
        width: 100%;
        content: '';
        background: radial-gradient(ellipse at 50% -50% , rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
      }
    }

    .icon-wrapper {
      position: absolute;
      display: table;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 26px;
      width: 26px;
      background-color: #FFFFFF;
      border: 1px solid #AAAAAA;
      border-radius: 50%;
      background-clip: padding-box;
      text-align: center;

      i {
        display: block;
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
}

body:not(:-moz-handler-blocked) .fusion-separator.sep-shadow:after {
  background: radial-gradient(ellipse at 50% -50% , rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 80%);
}