/**
  * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. 
  */

/**
  * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.
  */

/**
  * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.
  */

/* IC-DIVIDER COLORS */

/**
  * @internal @prop --ic-divider-background
  */

/**
  * @internal @prop --ic-divider-background-monochrome
  */

/**
  * @internal @prop --ic-divider-label
  */

/**
  * @internal @prop --ic-divider-label-monochrome
  */

/* Horizontal Divider */
:host(.ic-divider-horizontal) {
  display: flex;
  width: var(--ic-divider-horizontal-width, 100%);
  align-items: center;
  -moz-column-gap: var(--ic-space-xxs);
       column-gap: var(--ic-space-xxs);
}

hr {
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);
  width: inherit;
}

:host(.ic-divider-horizontal)::before,
:host(.ic-divider-horizontal)::after {
  border-left: none !important;
}

:host(.ic-divider-horizontal.ic-divider-label-right)::before,
:host(.ic-divider-horizontal.ic-divider-label-center)::before,
:host(.ic-divider-horizontal.ic-divider-label-left)::after,
:host(.ic-divider-horizontal.ic-divider-label-center)::after {
  content: "";
  border: none;
  width: 100%;
}

/* Vertical Divider */
:host(.ic-divider-vertical) {
  display: flex;
  flex-direction: column;
  height: var(--ic-divider-vertical-height, inherit);
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  -moz-column-gap: var(--ic-space-xxs);
       column-gap: var(--ic-space-xxs);
  border: none;
}

:host(.ic-divider-vertical) div.vertical-divider {
  display: flex;
  height: inherit;
}

:host(.ic-divider-vertical.ic-divider-label-bottom)::before,
:host(.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-divider-vertical.ic-divider-label-top)::after,
:host(.ic-divider-vertical.ic-divider-label-center)::after {
  content: "";
  height: 100%;
}

/* Theme */
hr,
:host(.ic-divider-horizontal.ic-divider-label-right)::before,
:host(.ic-divider-horizontal.ic-divider-label-center)::before,
:host(.ic-divider-horizontal.ic-divider-label-left)::after,
:host(.ic-divider-horizontal.ic-divider-label-center)::after {
  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);
}

:host(.ic-divider-monochrome) hr,
:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-right)::before,
:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::before,
:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-left)::after,
:host(.ic-divider-monochrome.ic-divider-horizontal.ic-divider-label-center)::after {
  border-bottom-color: var(--ic-divider-background-monochrome);
}

:host() div.vertical-divider,
:host(.ic-divider-vertical.ic-divider-label-bottom)::before,
:host(.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-divider-vertical.ic-divider-label-top)::after,
:host(.ic-divider-vertical.ic-divider-label-center)::after {
  border-left: solid var(--ic-space-1px) var(--ic-divider-background);
}

:host(.ic-divider-monochrome) div.vertical-divider,
:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-bottom)::before,
:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-top)::after,
:host(.ic-divider-monochrome.ic-divider-vertical.ic-divider-label-center)::after {
  border-left-color: var(--ic-divider-background-monochrome);
}

/* Divider in ic-side-navigation */
:host(.ic-side-navigation-keyline.ic-theme-dark) {
  --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);
}

:host(.ic-side-navigation-keyline.ic-theme-light) {
  --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);
}

:host(.ic-side-navigation-keyline.ic-theme-dark) hr,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-right)::before,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::before,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-left)::after,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal.ic-divider-label-center)::after {
  border-bottom-color: var(--ic-side-navigation-keyline);
}

:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-bottom)::before,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-top)::after,
:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical.ic-divider-label-center)::after {
  border-left-color: var(--ic-side-navigation-keyline);
}

:host(.ic-side-navigation-keyline.ic-theme-light) hr,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-right)::before,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::before,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-left)::after,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal.ic-divider-label-center)::after {
  border-bottom-color: var(--ic-side-navigation-keyline);
}

:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-bottom)::before,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-top)::after,
:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical.ic-divider-label-center)::after {
  border-left-color: var(--ic-divider-background-monochrome);
}

/* Weight */
:host(.ic-divider-very-thick) hr,
:host(.ic-divider-very-thick.ic-divider-label-right)::before,
:host(.ic-divider-very-thick.ic-divider-label-center)::before,
:host(.ic-divider-very-thick.ic-divider-label-left)::after,
:host(.ic-divider-very-thick.ic-divider-label-center)::after {
  border-bottom-width: var(--ic-space-xs);
}

:host(.ic-divider-very-thick) .vertical-divider,
:host(.ic-divider-very-thick.ic-divider-label-bottom)::before,
:host(.ic-divider-very-thick.ic-divider-label-center)::before,
:host(.ic-divider-very-thick.ic-divider-label-top)::after,
:host(.ic-divider-very-thick.ic-divider-label-center)::after {
  border-left-width: var(--ic-space-xs);
}

:host(.ic-divider-thick) hr,
:host(.ic-divider-thick.ic-divider-label-right)::before,
:host(.ic-divider-thick.ic-divider-label-center)::before,
:host(.ic-divider-thick.ic-divider-label-left)::after,
:host(.ic-divider-thick.ic-divider-label-center)::after {
  border-bottom-width: var(--ic-space-xxs);
}

:host(.ic-divider-thick) .vertical-divider,
:host(.ic-divider-thick.ic-divider-label-bottom)::before,
:host(.ic-divider-thick.ic-divider-label-center)::before,
:host(.ic-divider-thick.ic-divider-label-top)::after,
:host(.ic-divider-thick.ic-divider-label-center)::after {
  border-left-width: var(--ic-space-xxs);
}

:host(.ic-divider-medium) hr,
:host(.ic-divider-medium.ic-divider-label-right)::before,
:host(.ic-divider-medium.ic-divider-label-center)::before,
:host(.ic-divider-medium.ic-divider-label-left)::after,
:host(.ic-divider-medium.ic-divider-label-center)::after {
  border-bottom-width: var(--ic-space-xxxs);
}

:host(.ic-divider-medium) .vertical-divider,
:host(.ic-divider-medium.ic-divider-label-bottom)::before,
:host(.ic-divider-medium.ic-divider-label-center)::before,
:host(.ic-divider-medium.ic-divider-label-top)::after,
:host(.ic-divider-medium.ic-divider-label-center)::after {
  border-left-width: var(--ic-space-xxxs);
}

:host(.ic-divider-thin) hr,
:host(.ic-divider-thin.ic-divider-label-right)::before,
:host(.ic-divider-thin.ic-divider-label-center)::before,
:host(.ic-divider-thin.ic-divider-label-left)::after,
:host(.ic-divider-thin.ic-divider-label-center)::after {
  border-bottom-width: var(--ic-space-1px);
}

:host(.ic-divider-thin) .vertical-divider,
:host(.ic-divider-thin.ic-divider-label-bottom)::before,
:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::before,
:host(.ic-divider-thin.ic-divider-label-top)::after,
:host(.ic-divider-thin.ic-divider-vertical.ic-divider-label-center)::after {
  border-left-width: var(--ic-space-1px);
}

/* Border styling */
:host(.ic-divider-dashed) hr,
:host(.ic-divider-dashed.ic-divider-label-right)::before,
:host(.ic-divider-dashed.ic-divider-label-center)::before,
:host(.ic-divider-dashed.ic-divider-label-left)::after,
:host(.ic-divider-dashed.ic-divider-label-center)::after {
  border-bottom-style: dashed;
}

:host(.ic-divider-dashed) .vertical-divider,
:host(.ic-divider-dashed.ic-divider-label-bottom)::before,
:host(.ic-divider-dashed.ic-divider-label-center)::before,
:host(.ic-divider-dashed.ic-divider-label-top)::after,
:host(.ic-divider-dashed.ic-divider-label-center)::after {
  border-left-style: dashed;
}

/* Label styling */
:host() .ic-divider-label {
  text-wrap: wrap;
  text-align: left;
  width: -moz-max-content;
  width: max-content;
  max-width: var(--ic-divider-label-width, max(20rem, 60%));
}

:host(.ic-divider-horizontal.ic-divider-label-center) .ic-divider-label {
  text-align: center;
}

:host(.ic-divider-vertical) .ic-divider-label {
  text-align: center;
  max-width: var(--ic-divider-label-width, 20rem);
}

:host() .ic-divider-label-container {
  width: -moz-max-content;
  width: max-content;
  max-width: var(--ic-divider-label-width, max(20rem, 60%));
}

:host(.ic-divider-vertical) .ic-divider-label-container {
  max-width: var(--ic-divider-label-width, 20rem);
}

:host() .ic-divider-label p {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}

:host() .ic-divider-label,
:host() ::slotted(*) {
  color: var(--ic-divider-label);
}

:host(.ic-divider-monochrome) .ic-divider-label,
:host(.ic-divider-monochrome) ::slotted(*) {
  color: var(--ic-divider-label-monochrome);
}

/* High contrast */
@media (forced-colors: active) {
  hr,
  :host(.ic-divider-horizontal.ic-divider-label-right)::before,
  :host(.ic-divider-horizontal.ic-divider-label-center)::before,
  :host(.ic-divider-horizontal.ic-divider-label-left)::after,
  :host(.ic-divider-horizontal.ic-divider-label-center)::after {
    border-bottom-color: transparent;
  }

  :host() div.vertical-divider,
  :host(.ic-divider-vertical.ic-divider-label-bottom)::before,
  :host(.ic-divider-vertical.ic-divider-label-center)::before,
  :host(.ic-divider-vertical.ic-divider-label-top)::after,
  :host(.ic-divider-vertical.ic-divider-label-center)::after {
    border-left-color: transparent;
  }
}