@use "../theme.scss" as *;
@use "../icon.scss" as *;

.divider {
  user-select: none;
  color: $divider-color;

  & > .divider-element {
    padding-left: 1em;
    padding-right: 1em;
    background-color: $divider-fill-color;
    z-index: 1;

    &.divider-begin-element {
      padding-left: 0.5em;
    }

    &.divider-end-element {
      padding-right: 0.5em;
    }
  }

  &.divider-horizontal {
    margin: 1rem 0;

    & > .divider-rule {
      border-bottom: 1px solid $divider-border-color;
      position: absolute;
      left: 0;
      top: 50%;
      right: 0;
    }
  }

  &.divider-vertical {
    & > .divider-rule {
      border-left: 1px solid $divider-border-color;
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      height: 100%;
    }

    & > .divider-element {
      padding-top: 0.5em;
      padding-bottom: 0.5em;
    }
  }

  & > .icogram {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
  }

  &.divider-heading {
    text-transform: none;
  }

  &:not(.divider-heading) {
    font-size: 0.85em;
  }

  &:empty {
    border-bottom: 1px solid $divider-border-color;
  }

  &.divider-horizontal {
    position: relative;
  }

  &.divider-vertical {
    position: relative;
  }
}

/* HTML based divider should just look the same as the divider */

hr {
  border-top-color: $divider-border-color;
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  height: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}