@import '~app/components/ui/colors.scss';

$sidebar-width: 320px;

.sidebar {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 50px;
  z-index: 10;

  background: $black;
}

.hiddenSidebar {
  composes: sidebar;

  display: none;
}

.content {
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}

@media (min-width: 350px) {
  .content {
    padding: 55px 0;
  }
}

@media (min-width: 720px) {
  .content {
    padding: 55px 50px;
    margin-left: $sidebar-width;
  }

  .sidebar {
    right: auto;

    width: $sidebar-width;
  }

  .hiddenSidebar {
    display: block;
  }
}