$divider-color: var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));

.analytics-layout-cell {
  margin-left: -1px;
  margin-right: -1px;
  min-height: 48px;
  position: relative;

  // repeated class required: keeps the two-class weight the Stylable state had; without it an outside override wins
  &#{&}--show-divider {
    border-right: solid 1px transparent;
    border-left: solid 1px transparent;
    border-image: linear-gradient(
        transparent 0 18px,
        $divider-color 18px calc(100% - 18px),
        transparent calc(100% - 18px) 100%
      )
      1;
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  &#{&}--highlight {
    border-image: linear-gradient($divider-color 0 100%) 1;
    z-index: 1;
  }

  &:first-child {
    border-left: none;
  }

  &:last-child {
    border-right: none;
  }
}