/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.Drawer {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  background-color: var(--colorsSurfaceDefault, white);
  bottom: 0;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.15);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 0;
  width: 90%;
}
.Drawer:focus {
  outline: none;
}
.Drawer:focus-visible {
  outline: none;
}
.Drawer .Drawer__header {
  align-items: center;
  box-sizing: border-box;
  background: var(--colorsSurfaceGreySubdued, #f7f7f7);
  box-shadow: 0 1px 0 var(--colorsBorderGrey, #dfe0e1);
  display: flex;
  padding: 16px 24px;
  min-height: 64px;
  z-index: 1;
  margin: 0;
}
.Backdrop .Drawer {
  cursor: auto;
}

.Drawer--portal {
  position: fixed;
}

.Drawer--w-xs {
  max-width: 340px;
}

.Drawer--w-s {
  max-width: 560px;
}

.Drawer--w-m {
  max-width: 780px;
}

.Drawer--w-l {
  max-width: 1100px;
}

.Drawer__header-title.Headline {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-size: 20px;
  flex-grow: 1;
  margin: 0;
  color: var(--colorsTextOnGrey, #444445);
}

.Drawer__header-close.Button {
  margin-left: 24px;
  margin-right: -8px;
  margin-top: -1px;
  margin-bottom: -1px;
}
.Drawer__header-close.Button:hover {
  background-color: transparent;
}

.Drawer__footer {
  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
  display: flex;
  padding: 16px 24px;
}

.Drawer__content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

/*# sourceMappingURL=index.css.map */