.rt-Separator {
  display: block;
  background-color: var(--accent-a6);
}

/***************************************************************************************************
 *                                                                                                 *
 * ORIENTATION                                                                                     *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-Separator {
    &:where(.rt-r-orientation-horizontal) {
      width: var(--separator-size);
      height: 1px;
    }
    &:where(.rt-r-orientation-vertical) {
      width: 1px;
      height: var(--separator-size);
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-Separator {
    &:where(.rt-r-size-1) {
      --separator-size: var(--space-4);
    }
    &:where(.rt-r-size-2) {
      --separator-size: var(--space-6);
    }
    &:where(.rt-r-size-3) {
      --separator-size: var(--space-9);
    }
    &:where(.rt-r-size-4) {
      --separator-size: 100%;
    }
  }
}