.dialog-off-canvas-main-canvas {
  /* @TODO remove if this gets merged https://github.com/localgovdrupal/localgov_base/pull/188 */
  position: relative;
}

.off-canvas {
  position: absolute;
  z-index: 100;
  top: 0;
  width: 500px;
  max-width: 90%;
  height: 100%;
  padding: var(--spacing);
  transition: var(--transition-time);
  color: var(--off-canvas-text-color);
  border-color: var(--off-canvas-border-color);
  border-right: var(--border);
  border-bottom: var(--border);
  background-color: var(--off-canvas-background-color);
}

.off-canvas[data-expanded="false"] {
  transform: translateX(-100%);
}

.off-canvas[data-expanded="true"] {
  transform: translateX(0);
}

.off-canvas[data-expanded="false"] .region-off-canvas {
  /* Hide from the tab order when not needed */
  display: none;
}

.off-canvas[data-expanded="true"] .region-off-canvas {
  display: flex;
  padding-top: var(--minimum-clickable-icon-size);
}

.off-canvas a {
  color: var(--off-canvas-link-color);
}

.off-canvas a:focus,
.off-canvas a:hover {
  color: var(--off-canvas-link-hover-color);
}

.lgd-region__inner--off-canvas {
  width: calc(100% - var(--spacing) * 2);
}

.off-canvas__close {
  position: absolute;
  top: var(--spacing);
  right: var(--spacing);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--minimum-clickable-icon-size);
  /* background-color: var(--off-canvas-link-color); */
}

.off-canvas__close--icon {
  margin-left: var(--spacing-smaller);
  transform: rotate(45deg);
}

.off-canvas .menu {
  list-style: none;
}

.lgd-region--off-canvas .block-group-content-menu {
  font-size: var(--font-size);
}

.lgd-region--off-canvas .block-group-content-menu a {
  display: inline-block;
  min-height: var(--minimum-clickable-icon-size);
}

.microsite-header__off-canvas-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-smaller);
}

.microsite-header__off-canvas-toggle:before {
  display: inline-flex;
  width: var(--menu-sub-menu-icon-size);
  height: var(--menu-sub-menu-icon-size);
  margin-right: var(--spacing-smaller);
  content: "";
  background-color: currentColor;
  -webkit-mask: var(--off-canvas-menu-icon) no-repeat 100% 100%;
  mask: var(--off-canvas-menu-icon) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
}