:host {
  position: relative;
  pointer-events: none;
}

/* The default for CSS grids is to stretch items to completely fill a grid cell
  if their width or height is `auto`. So we would have to explicitly set the
  width and height on components to something other than `auto`, such as
  `max-content` to prevent it from being stretched. This change allows us to
  leave the width and height properties to their default value, which is `auto`.
  See discussion on GitHub:
  https://github.com/bokeh/bokeh/pull/14191#discussion_r1880500434 */
:host {
  align-items: start;
  justify-items: start;
}

:host(.bk-above), :host(.bk-below) {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 100%;
}

:host(.bk-left), :host(.bk-right) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 100%;
  grid-template-columns: auto;
}

:host(.bk-above) {
  grid-area: above;
}
:host(.bk-below) {
  grid-area: below;
}
:host(.bk-left) {
  grid-area: left;
}
:host(.bk-right) {
  grid-area: right;
}
:host(.bk-center) {
  grid-area: center;
}

:host(.bk-center) {
  overflow: hidden;
}
