.Scrollable {
  --pc-scrollable-shadow-size: var(--p-space-5);
  --pc-scrollable-shadow-bottom: inset 0
    calc(-1 * var(--pc-scrollable-shadow-size)) var(--pc-scrollable-shadow-size)
    calc(-1 * var(--pc-scrollable-shadow-size)) var(--p-hint-from-direct-light);
  --pc-scrollable-shadow-top: inset 0 var(--pc-scrollable-shadow-size)
    var(--pc-scrollable-shadow-size) calc(-1 * var(--pc-scrollable-shadow-size))
    var(--p-hint-from-direct-light);
  --pc-scrollable-max-height: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  max-height: var(--pc-scrollable-max-height);

  &:focus {
    outline: var(--p-border-width-2) solid var(--p-focused);
    outline-offset: 2px;
  }
}

.horizontal {
  overflow-x: auto;
}

.vertical {
  overflow-y: auto;
}

.verticalHasScrolling {
  overflow-y: scroll;
}

.hasTopShadow {
  box-shadow: var(--pc-scrollable-shadow-top);
}

.hasBottomShadow {
  box-shadow: var(--pc-scrollable-shadow-bottom);
}

.hasTopShadow.hasBottomShadow {
  box-shadow: var(--pc-scrollable-shadow-top),
    var(--pc-scrollable-shadow-bottom);
}