@import "styles/base.scss";

.drawer-container {
  
  width: 100%;

  @include media('<tablet') {
    &:after {
      top: 90px;
    }
  }

  
  .content {
    // Borders for every thing but the open/close
    border: 1px solid $grey-border;
    border-left: none;
    min-height: 100px;
    // this prevents child contents with margin rules from moving the containers
    overflow: auto;
    padding: 10px;
  }


  .open-close {
    background: $white;
    padding-left: 31px;
    position: relative;
    margin: 0;

    .opener {
      display: flex;
      align-items: center;
      position: absolute;
      cursor: pointer;
      left: 0;
      top: 0;
      bottom: 0;
      width: 31px;
      background-color: $blue;

      .icon-wrap {
        width: 12px;
        height: 19px;
        margin: auto;
        img {
          height: 100%;
          width: 100%;
          &.rotated {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
  .drawer {
    padding-left: 31px;
    background: #F4F8FB;
    border-left: none;
    border-top: none;
    position: relative;

    .content {
      border-top: none;
    }

    .opener {
      background:#1A8DC9;
      position: absolute;
      cursor: pointer;
      left: 0;
      top: 0;
      bottom: 0;
      width: 31px;
    }
  }
}