/**
 * Separator Utility Classes - Box shadow-based dividers
 *
 * Note: Uses @component-border-color for separator color.
 *
 * Intentionally hardcoded values:
 * - 1px/-1px box-shadow offsets: Standard separator line width
 * - 1px min-height: Ensures separator is visible even in empty tags
 */

.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;
  }
}