@use '../../internals/Box/styles/index' as box;

.rs-divider {
  --rs-divider-size-xs: calc(0.0625rem * var(--rs-scale));
  --rs-divider-size-sm: calc(0.125rem * var(--rs-scale));
  --rs-divider-size-md: calc(0.1875rem * var(--rs-scale));
  --rs-divider-size-lg: calc(0.25rem * var(--rs-scale));
  --rs-divider-size-xl: calc(0.3125rem * var(--rs-scale));
  --rs-divider-size: var(--rs-divider-size-xs);

  --rs-divider-spacing-xs: calc(var(--rs-spacing) * 2);
  --rs-divider-spacing-sm: calc(var(--rs-spacing) * 3);
  --rs-divider-spacing-md: calc(var(--rs-spacing) * 4);
  --rs-divider-spacing-lg: calc(var(--rs-spacing) * 5);
  --rs-divider-spacing-xl: calc(var(--rs-spacing) * 6);
  --rs-divider-spacing: var(--rs-divider-spacing-xs);

  --rs-divider-border-style: solid;
  --rs-divider-border-color: var(--rs-divider-color, var(--rs-divider-border));
  --rs-divider-label-font-size: var(--rs-font-size-sm);

  font-size: var(--rs-divider-label-font-size);
  color: var(--rs-divider-color, inherit);
  border-style: var(--rs-divider-border-style);
  border-color: var(--rs-divider-border-color);
  border-width: 0;

  &:where([data-appearance='dashed']) {
    --rs-divider-border-style: dashed;
  }

  &:where([data-appearance='dotted']) {
    --rs-divider-border-style: dotted;
  }

  &:where([data-orientation='horizontal']) {
    width: 100%;
    margin-block: var(--rs-divider-spacing);
    border-top-width: var(--rs-divider-size);
  }

  &:where([data-orientation='vertical']) {
    display: inline-block;
    min-height: 1em;
    height: 100%;
    width: 1px;
    vertical-align: middle;
    margin-inline: var(--rs-divider-spacing);
    border-inline-start-width: var(--rs-divider-size);
  }

  &:where([data-orientation='horizontal'][data-with-label='true']) {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: transparent;
    flex: 0 0 auto;
    border-width: 0;

    &::before,
    &::after {
      content: '';
      flex: 1 1 auto;
      border-top-style: var(--rs-divider-border-style);
      border-top-color: var(--rs-divider-border-color);
      border-top-width: var(--rs-divider-size);
    }

    &::before {
      margin-inline-end: var(--rs-divider-spacing-xs);
    }

    &::after {
      margin-inline-start: var(--rs-divider-spacing-xs);
    }
  }

  &:where([data-placement='start']):before {
    display: none;
  }

  &:where([data-placement='end']):after {
    display: none;
  }
}