:host {
  --color-background-default: var(--pine-color-white);
  background: var(--color-background-default);
  border-collapse: separate;
  box-sizing: border-box;
  display: table;
  width: 100%;
}

:host(:focus-visible) {
  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
  box-shadow: var(--box-shadow-focus);
  outline: none;
}

:host(.is-responsive) {
  background-attachment: local, local, scroll, scroll;
  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;
  display: block;
  margin: 0 auto;
  max-width: fit-content;
  overflow-x: auto;
  white-space: nowrap;
}