@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-top: $padding;
  margin-bottom: $padding;

  &.divider-portrait {
    margin-top: 0;
    margin-right: $padding;
    margin-bottom: 0;
    margin-left: $padding;
  }
}

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