:host {
  --margin-inline: 10px;
  --margin-block: 0;
  --height-divider: 2px;
  --background: var(--gasco-color-primary, #00A3E0);
  width: 100%;
  max-width: 100%;
}

.divider-native {
  margin-left: var(--margin-block);
  margin-right: var(--margin-block);
  margin-top: var(--margin-inline);
  margin-bottom: var(--margin-inline);
  height: var(--height-divider);
  width: 100%;
  max-width: 100%;
  background: var(--gasco-color-base);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .divider-native {
    margin-left: unset;
    margin-right: unset;
    -webkit-margin-start: var(--margin-block);
    margin-inline-start: var(--margin-block);
    -webkit-margin-end: var(--margin-block);
    margin-inline-end: var(--margin-block);
  }
}

:host(.divider-round) .divider-native {
  border-radius: 100px;
}