@import '../themes';

@include themify() {
  .messenger {
    display: grid;
    width: 100%;
    height: 100vh;
    background: transparent;
    grid-template-columns: 270px auto;
    grid-template-rows: 60px auto 60px;
    grid-column-gap: 0;
    grid-row-gap: 0;
  }

  .container {
    padding: 10px;
  }

  .scrollable {
    position: relative;
    overflow-y: scroll;
  }

  .scrollable::-webkit-scrollbar {
    width: 0 !important
  }

  .sidebar {
    background: themed('sidebarBackgroundColor');
    grid-row-start: 1;
    grid-row-end: span 3;
  }

  .content {
    background: themed('contentBackgroundColor');
    grid-row-start: 1;
    grid-row-end: span 3;
  }

  .footer {
    grid-column-start: 2;
    background-color: themed('backgroundColor');
  }
}
