:host {
  --background-color: var(--supreme-waffle-color-neutral-grey-400);
  --offset-xxs: var(--supreme-waffle-spacing-xxs);
  --offset-xs: var(--supreme-waffle-spacing-xs);
  --offset-sm: var(--supreme-waffle-spacing-sm);
  --offset-md: var(--supreme-waffle-spacing-md);
  --offset-lg: var(--supreme-waffle-spacing-lg);
  --offset-xxl: var(--supreme-waffle-spacing-2xl);
}

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

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

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

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

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

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

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

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

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

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