//        ___                 _____        ___                      ___          ___
//       /  /\      ___      /  /::\      /  /\        _____       /  /\        /  /\
//      /  /:/_    /  /\    /  /:/\:\    /  /:/_      /  /::\     /  /::\      /  /::\
//     /  /:/ /\  /  /:/   /  /:/  \:\  /  /:/ /\    /  /:/\:\   /  /:/\:\    /  /:/\:\
//    /  /:/ /::\/__/::\  /__/:/ \__\:|/  /:/ /:/_  /  /:/~/::\ /  /:/~/::\  /  /:/~/:/
//   /__/:/ /:/\:\__\/\:\_\  \:\ /  /:/__/:/ /:/ /\/__/:/ /:/\:/__/:/ /:/\:\/__/:/ /:/___
//   \  \:\/:/~/:/  \  \:\/\  \:\  /:/\  \:\/:/ /:/\  \:\/:/~/:|  \:\/:/__\/\  \:\/:::::/
//    \  \::/ /:/    \__\::/\  \:\/:/  \  \::/ /:/  \  \::/ /:/ \  \::/      \  \::/~~~~
//     \__\/ /:/     /__/:/  \  \::/    \  \:\/:/    \  \:\/:/   \  \:\       \  \:\
//       /__/:/      \__\/    \__\/      \  \::/      \  \::/     \  \:\       \  \:\
//       \__\/                            \__\/        \__\/       \__\/        \__\/

//*
// @pattern Sidebar
// @group Partials
//
// The main sidebar for the page. This sidebar is activated by a toggle
// (`sidebar__toggler`) and slides over the main content (without moving the
// main content).
//
// @since 1.0.0

//*
// The main piece of the sidebar. This provides the visual backing of the
// sidebar and manages the reveal/ hide transition.

.sidebar {
  // position
  position: absolute;
  left: 0; top: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.2s ease;
  max-width: 15rem;

  // box model
  display: flex;
  height: 100vh;

  // backdrop
  background-color: ui-color(white);
  @include default(box-shadow);

  @include after(40rem) {
    position: static;
    transform: translate3d(0, 0, 0);
  }
}

//*
// The state that is added by the JavaScript component when the sidebar is
// visible.

.sidebar--is-active {
  transform: translate3d(0, 0, 0);
}



//*
// The container for the item that should activate the sidebar. The JavaScript
// component will look for any instances of this class and will attach `click`
// handlers that that toggle the sidebar's visibility.

.sidebar__toggler {
  background: transparent;
  padding: 0;
  margin: 0;
  appearance: none;
  border: none;

  &:focus {
    outline: none;
  }

  // @include after(40rem) {
  //   display: none;
  // }
}