@import "../../mp-variables";

.mp-sidepanel.agol {

  display: flex;
  flex-direction: column;
  height: 100%;

  .content-toggle {
    width: 100%;
    font-size: inherit;

    label {
      padding: 2px 6px;
      font-size: inherit;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .divider {
    width: 80%;
    text-align: center;
    border-bottom: 1px solid @gray;
    margin: 10px auto 25px;
    line-height: 0;

    span {
      color: @gray;
      background: #fff;
      padding: 0 10px;
    }
  }

  .create-map-button {
    margin: 0 0 15px;
  }

  .photo-input {
    flex-grow: 1;
    position: relative;
    margin-bottom: 0;

    .drag-area {
      position: absolute;
      height: 100%;
      width: 100%;
    }
  }

  @media (min-width: (@screen-sm + 1)) {
    .content-toggle > .btn {
      display: block;
      width: 100%;
      max-width: 100%;
      text-align: left;
      margin-left: 0;
      margin-top: 2px;

    }

    .content-toggle > .btn {
    }
  }

  @media (max-width: @screen-sm) {

    .content-toggle label {

    }

    .photo-input {
      flex-grow: 0;
    }

    .photo-input .drag-area {
      position: static;
      height: auto;
      width: auto;
    }

    .col-xs-6 {
      // override .btn-block
      width: 49%;
    }
    .col-xs-6:nth-of-type(1) {
      margin-left: 2%;
    }

  }

  @media (max-height: 780px), (max-width: @screen-sm) {
    .content-toggle label {
      padding: 0 6px;
      line-height: 1.5em;
    }

    .search {
      margin-bottom: 0;
    }
    .create-map-button {
      margin-bottom: 0;
    }
    .divider {
      margin: 15px auto;
    }
  }
}
