.pds-divider {
  background: var(--pine-color-border);
  border: 0;
  display: flex;
  height: var(--pine-border-width);
  margin: 0;
  width: 100%;
}

.pds-divider--vertical {
  height: 100%;
  width: 1px;
}

.pds-divider--offset-xxs {
  margin: 0 calc(var(--pine-dimension-2xs) * -1);
  padding: 0 var(--pine-dimension-2xs);
}
.pds-divider--offset-xxs.pds-divider--vertical {
  margin: calc(var(--pine-dimension-2xs) * -1) 0;
  padding: var(--pine-dimension-2xs) 0;
}

.pds-divider--offset-xs {
  margin: 0 calc(var(--pine-dimension-xs) * -1);
  padding: 0 var(--pine-dimension-xs);
}
.pds-divider--offset-xs.pds-divider--vertical {
  margin: calc(var(--pine-dimension-xs) * -1) 0;
  padding: var(--pine-dimension-xs) 0;
}

.pds-divider--offset-sm {
  margin: 0 calc(var(--pine-dimension-sm) * -1);
  padding: 0 var(--pine-dimension-sm);
}
.pds-divider--offset-sm.pds-divider--vertical {
  margin: calc(var(--pine-dimension-sm) * -1) 0;
  padding: var(--pine-dimension-sm) 0;
}

.pds-divider--offset-md {
  margin: 0 calc(var(--pine-dimension-md) * -1);
  padding: 0 var(--pine-dimension-md);
}
.pds-divider--offset-md.pds-divider--vertical {
  margin: calc(var(--pine-dimension-md) * -1) 0;
  padding: var(--pine-dimension-md) 0;
}

.pds-divider--offset-lg {
  margin: 0 calc(var(--pine-dimension-lg) * -1);
  padding: 0 var(--pine-dimension-lg);
}
.pds-divider--offset-lg.pds-divider--vertical {
  margin: calc(var(--pine-dimension-lg) * -1) 0;
  padding: var(--pine-dimension-lg) 0;
}

.pds-divider--offset-xl {
  margin: 0 calc(var(--pine-dimension-xl) * -1);
  padding: 0 var(--pine-dimension-xl);
}
.pds-divider--offset-xl.pds-divider--vertical {
  margin: calc(var(--pine-dimension-xl) * -1) 0;
  padding: var(--pine-dimension-xl) 0;
}

.pds-divider--offset-xxl {
  margin: 0 calc(var(--pine-dimension-2xl) * -1);
  padding: 0 var(--pine-dimension-2xl);
}
.pds-divider--offset-xxl.pds-divider--vertical {
  margin: calc(var(--pine-dimension-2xl) * -1) 0;
  padding: var(--pine-dimension-2xl) 0;
}

@media (max-width: 767px) {
  .pds-divider--vertical {
    display: none;
  }
}