/* widget-divider.css: estilos de presentación; comprueba sus rangos responsive al editar. */
.component-divider {
  --divider-border-style: none;
  --divider-border-width: 1px;
  --divider-color: #0c0d0e;
  --divider-icon-size: 20px;
  --divider-element-spacing: 10px;
  --divider-pattern-height: 24px;
  --divider-pattern-size: 20px;
  --divider-pattern-url: none;
  --divider-pattern-repeat: repeat-x;
}
.component-divider .site-divider {
  display: flex;
}
.component-divider .site-divider__text {
  font-size: 15px;
  line-height: 1;
  max-width: 95%;
}
.component-divider .site-divider__element {
  flex-shrink: 0;
  margin: 0 var(--divider-element-spacing);
}
.component-divider .icon {
  font-size: var(--divider-icon-size);
}
.component-divider .site-divider-separator {
  direction: ltr;
  display: flex;
  margin: 0;
}
.component-divider--view-line_icon .site-divider-separator,
.component-divider--view-line_text .site-divider-separator {
  align-items: center;
}
.component-divider--view-line_icon .site-divider-separator:after,
.component-divider--view-line_icon .site-divider-separator:before,
.component-divider--view-line_text .site-divider-separator:after,
.component-divider--view-line_text .site-divider-separator:before {
  border-block-end: 0;
  border-block-start: var(--divider-border-width) var(--divider-border-style)
    var(--divider-color);
  content: "";
  display: block;
  flex-grow: 1;
}
.component-divider--element-align-left
  .site-divider
  .site-divider-separator
  > .site-divider__svg:first-of-type {
  flex-grow: 0;
  flex-shrink: 100;
}
.component-divider--element-align-left
  .site-divider-separator:before {
  content: none;
}
.component-divider--element-align-left .site-divider__element {
  margin-left: 0;
}
.component-divider--element-align-right
  .site-divider
  .site-divider-separator
  > .site-divider__svg:last-of-type {
  flex-grow: 0;
  flex-shrink: 100;
}
.component-divider--element-align-right
  .site-divider-separator:after {
  content: none;
}
.component-divider--element-align-right .site-divider__element {
  margin-right: 0;
}
.component-divider--element-align-start
  .site-divider
  .site-divider-separator
  > .site-divider__svg:first-of-type {
  flex-grow: 0;
  flex-shrink: 100;
}
.component-divider--element-align-start
  .site-divider-separator:before {
  content: none;
}
.component-divider--element-align-start .site-divider__element {
  margin-inline-start: 0;
}
.component-divider--element-align-end
  .site-divider
  .site-divider-separator
  > .site-divider__svg:last-of-type {
  flex-grow: 0;
  flex-shrink: 100;
}
.component-divider--element-align-end
  .site-divider-separator:after {
  content: none;
}
.component-divider--element-align-end .site-divider__element {
  margin-inline-end: 0;
}
.component-divider:not(.component-divider--view-line_text):not(
    .component-divider--view-line_icon
  )
  .site-divider-separator {
  border-block-start: var(--divider-border-width) var(--divider-border-style)
    var(--divider-color);
}
.component-divider--separator-type-pattern {
  --divider-border-style: none;
}
.component-divider--separator-type-pattern.component-divider--view-line
  .site-divider-separator,
.component-divider--separator-type-pattern:not(
    .component-divider--view-line
  )
  .site-divider-separator:after,
.component-divider--separator-type-pattern:not(
    .component-divider--view-line
  )
  .site-divider-separator:before,
.component-divider--separator-type-pattern:not(
    [class*="component-divider--view"]
  )
  .site-divider-separator {
  background-color: var(--divider-color);
  -webkit-mask-image: var(--divider-pattern-url);
  mask-image: var(--divider-pattern-url);
  -webkit-mask-repeat: var(--divider-pattern-repeat);
  mask-repeat: var(--divider-pattern-repeat);
  -webkit-mask-size: var(--divider-pattern-size) 100%;
  mask-size: var(--divider-pattern-size) 100%;
  min-height: var(--divider-pattern-height);
  width: 100%;
}
.component-divider--no-spacing {
  --divider-pattern-size: auto;
}
.component-divider--bg-round {
  --divider-pattern-repeat: round;
}
.rtl .component-divider .site-divider__text {
  direction: rtl;
}
.layout-inner > .component-divider,
.layout > .component-divider {
  width: var(--container-widget-width, 100%);
  --flex-grow: var(--container-widget-flex-grow);
}