@use 'mixins' as *;

@forward 'nav';

/* Default Drawer Direction: 'left' */
.cbp-drawer {
  display: flex;
  flex-direction: column;
  height: 101%; // this prevents edge cases where the drawer disappears on smaller viewports when scrolling to the end
  position: fixed;
  overflow-y: auto;
  transition: 0.5s;
  width: 100%;
  background-color: var(--cbp-color-white);
  z-index: var(--cbp-z-index-level-top);
}

// Revisit whether this is needed or should leverage Panel markup/CSS
.cbp-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  color: var(--cbp-color-text-lightest);
  background-color: var(--cbp-color-gray-cool-60);
  border-bottom: var(--cbp-border-size-xl) solid var(--cbp-color-gray-cool-70);

  div:first-child {
    display: inherit;

    i {
      font-size: 22px;
      margin-right: var(--cbp-space-4x);
    }

    & :where(h1,h2,h3,h4,h5,h6) {
      color: var(--cbp-color-text-lightest);
      font-size: var(--cbp-font-size-heading-lg);
      font-weight: var(--cbp-font-weight-bold);
    }
  }

  & > button {
    @include drawer-close-btn;
  }
}

.cbp-drawer__content {
  background-color: var(--cbp-color-white);
  height: 100%;
}

@include drawer-left;
@include drawer-right;

@media only screen and (min-width : 37.5em) {
  .cbp-drawer {
    width: 25rem;
  }
}