@use '../common/variables';

// —————————————————————————————————————————————————————————————————
// elements
// direction
// padding
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.divider {
  display: inline-block;
  background-color: variables.$border-color;
  height: 1px;
  width: 100%;
}

// —————————————————————————————————————————————————————————————————
// direction
// —————————————————————————————————————————————————————————————————

.divider {

  &-portrait {
    height: 100%;
    width: 1px;
  }
}

// —————————————————————————————————————————————————————————————————
// padding
// —————————————————————————————————————————————————————————————————

@mixin divider-padding($padding) {
  margin-block-start: $padding;
  margin-block-end: $padding;

  &.divider-portrait {
    margin-block-start: 0;
    margin-inline-end: $padding;
    margin-block-end: 0;
    margin-inline-start: $padding;
  }
}

.divider {
  @include divider-padding(1rem);
  &-none { @include divider-padding(0); }
  &-sm { @include divider-padding(.5rem); }
  &-lg { @include divider-padding(2rem); }
}