@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-divider-margin: $ink-spacing-xs !default;
$ink-divider-text-color: $ink-color-grey-2 !default;
$ink-divider-font-size: $ink-font-size-md !default;
$ink-divider-line-height: $ink-line-height-md !default;
$ink-divider-line-color: $ink-color-border !default;

.ink-divider {
  display: flex;
  align-items: center;
  font-size: $ink-divider-font-size;
  border: 0 $ink-divider-line-color solid;
  color: $ink-divider-text-color;
  line-height: $ink-divider-line-height;

  &--dashed {
    border-style: dashed;
  }

  &::before {
    margin-right: $ink-divider-margin;
  }

  &::after {
    margin-left: $ink-divider-margin;
  }

  &::before,
  &::after {
    content: '';
    display: block;
    flex: 1;
    box-sizing: border-box;
    height: $ink-one-px;
    border-color: inherit;
    border-style: inherit;
    border-width: $ink-one-px 0 0;
    transform: scaleY(0.5);
  }

  &--content {
    &-left {
      &::before {
        max-width: 10%;
      }
    }

    &-right {
      &::after {
        max-width: 10%;
      }
    }
  }
}