@import (reference) '../../../Style/App.less';

.Sidebar {
  &.modal {
    // choose some reasonable custom styles for the sidebar
    background-color: @navbar-default-bg;
    box-shadow: 5px 0 10px;

    // this will ensure the content will wrap if the resolution is too small
    max-width: 100%;

    // stylelint-disable declaration-no-important
    // the modal that we use for the sidebar supplies inline styles for padding.
    // we don't want this padding (see the main bootstrap style file for details
    // on why). This style override will prevent the inline style from taking
    // effect.
    padding: 0 !important;
    // stylelint-enable declaration-no-important

    // automatic right bound when displaying on the left
    &.left {
      right: auto;
    }

    // automatic left bound when displaying on the right
    &.right {
      left: auto;
    }

    // all of these styles apply to the fade animations
    // NOTE: exit transitions cannot be adjusted easily as react-bootstrap will
    //       internally remove the DOM nodes after the transition timeouts below
    &.fade {
      // setup the custom transition
      // we are simply relocating the transition to the root node instead of the dialog
      transition: transform 0.3s ease-out, opacity 0.15s linear;

      // these transforms are applied when the sidebar is being rendered
      // the +/- 100% will position the side bar just outside of the viewport bounds
      &:not(.in) {
        &.left {
          transform: translate3d(-100%, 0, 0);
        }

        &.right {
          transform: translate3d(100%, 0, 0);
        }
      }

      & .modal-dialog {
        // disable original transition
        transition: none;
      }
    }

    & .modal-dialog {
      // ensure dialog wraps its contents
      margin: 0;
      width: auto;

      & .modal-content {
        // disable original dialog content styles
        background-color: transparent;
        border: 0;
        box-shadow: none;

        .modal-body {
          // disable the original body padding
          padding: 0;
        }
      }
    }
  }
}