.separator-top {
  box-shadow: inset 0 1px 0 @component-border-color !important;
}
.separator-top-bottom {
  box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color !important;
}
.separator-bottom {
  min-height: 1px; // ensure it can be used in an empty tag
  box-shadow: inset 0 -1px 0 @component-border-color !important;
}

//media queries
@media (max-width: @screen-xs-max) {
  .separator-top-xs {
    box-shadow: inset 0 1px 0 @component-border-color !important;
  }
  .separator-top-bottom-xs {
    box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color !important;
  }
  .separator-bottom-xs {
    box-shadow: inset 0 -1px 0 @component-border-color !important;
  }
}

@media (min-width: @screen-sm-min) {
  .separator-top-sm {
    box-shadow: inset 0 1px 0 @component-border-color !important;
  }
  .separator-top-bottom-sm {
    box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color !important;
  }
  .separator-bottom-sm {
    box-shadow: inset 0 -1px 0 @component-border-color !important;
  }
}

@media (min-width: @screen-md-min) {
  .separator-top-md {
    box-shadow: inset 0 1px 0 @component-border-color !important;
  }
  .separator-top-bottom-md {
    box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color !important;
  }
  .separator-bottom-md {
    box-shadow: inset 0 -1px 0 @component-border-color !important;
  }
}

@media (min-width: @screen-lg-min) {
  .separator-top-lg {
    box-shadow: inset 0 1px 0 @component-border-color !important;
  }
  .separator-top-bottom-lg {
    box-shadow: inset 0 1px 0 @component-border-color, inset 0 -1px 0 @component-border-color !important;
  }
  .separator-bottom-lg {
    box-shadow: inset 0 -1px 0 @component-border-color !important;
  }
}