@import '../custom.less';
@import './vars.less';

@divider-prefix-cls: ~'@{css-prefix}divider';

.@{divider-prefix-cls} {
  .inject-Divider-vars();
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;

  & &--default,
  &&--default {
    border-color: var(--tv-Divider-default-color);
  }

  & &--success,
  &&--success {
    border-color: var(--tv-Divider-success-color);
  }

  & &--warning,
  &&--warning {
    border-color: var(--tv-Divider-warning-color);
  }

  & &--info,
  &&--info {
    border-color: var(--tv-Divider-info-color);
  }

  & &--error,
  &&--error {
    border-color: var(--tv-Divider-error-color);
  }

  &--horizontal {
    margin: 24px 0;
  }

  &--vertical {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    border-left: 1px solid var(--tv-Divider-dividing-line);
  }

  &__text {
    position: absolute;
    font-weight: 500;
    padding: 0 14px;
    color: var(--tv-Divider-text-color);
    background-color: var(--tv-Divider-text-bg-color);
    line-height: normal;
  }

  .@{divider-prefix-cls}-line {
    height: 1px;
    width: 100%;
    border-top-width: var(--tv-Divider-border-width);
  }

  .@{divider-prefix-cls}-text {
    position: absolute;
    padding: 0 14px;
    background-color: var(--tv-Divider-text-bg-color);
  }
}
