@import '../../sass/base.scss';

$offcanvas-width:      25rem;
$offcanvas-height:     30vh;

.is-offcanvas {
  &.placement-start,
  &.placement-end {
    @media (min-width: map-get($breakpoints, md )) {
      width: var(--bb--modal-width--md, $offcanvas-width);
    }
    @media (min-width: map-get($breakpoints, lg )) {
      width: var(--bb--modal-width--lg, $offcanvas-width);
    }
  }

  &.placement-top,
  &.placement-bottom {
    @media (min-width: map-get($breakpoints, md )) {
      height: var(--bb--modal-height--md, $offcanvas-height);
    }
    @media (min-width: map-get($breakpoints, lg )) {
      height: var(--bb--modal-height--lg, $offcanvas-height);
    }
  }
}