@import "vars";

$app-notebook-editor-header-height:   56px;
$app-notebook-input-height:           $app-notebook-editor-header-height;
$app-notebook-input-vertical:         10px;
$app-notebook-border-color:           rgba(0, 0, 0, 0.06);
$app-notebook-editor-min-width:       540px;

.app-notebook {
  .page {
    height: calc(100% - #{$site-footer-height});
  }

  .page-main {
    &, > form, .md-editor {
      height: 100%;
    }
  }

  .page-aside {
    .form-control {
      border-radius: 0;
      border-width: 0 0 1px 0;
      border-color: $app-notebook-border-color;
      padding: $app-notebook-input-vertical ($page-aside-padding-horizontal*2) $app-notebook-input-vertical $page-aside-padding-horizontal;
      height: $app-notebook-input-height;
    }

    .input-search-btn {
      padding-right: $page-aside-padding-horizontal;
      border-radius: 0;
    }

    &-inner {
      height: 100%;
    }
  }

  &-list {
    $height: ($input-height-base + pxtorem($app-notebook-input-vertical)*2);
    height: calc(100% - #{$height});

    .list-group {
      .list-group-item {
        border-bottom: 1px solid $color-blue-grey-200;
        border-radius: 0;
        margin-bottom: 0;
        white-space: normal;
        width: 100%;
        z-index: 0;

        &:hover {
          color: rgb(118, 131, 143);
          background-color: $color-primary-100;
        }

        &:last-of-type{
            border-bottom: 0;
        }

        &.active{
            border-bottom: 1px solid $color-blue-grey-200;
            background-color: $color-primary-100;
        }

        .list-group-item-heading {
          font-size: 18px;
          color: $color-blue-grey-700;
          font-weight: 300;
          margin-bottom: 10px;
        }

        .list-group-item-text {
          font-size: 14px;
          color: $color-blue-grey-500;
          margin-bottom: 15px;
          line-height: 1.5em;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        &::selection,
        .list-group-item-heading::selection,
        .list-group-item-text::selection {
          background-color: transparent;
        }

        .info {
          color: $color-blue-grey-400;

          .icon.wb-folder {
            float: left;
          }

          .category {
            font-size: 12px;
            float: left;
          }

          .time {
            font-size: 12px;
            float: right;
          }

          &::selection,
          .category::selection,
          .time::selection {
            background-color: transparent;
          }
        }
      }
    }
  }

  .md-editor {
    border: 0;
    border-radius: 0;
    max-width: 100%;
    overflow: auto;

    > .md-header {
      height: 56px;
      border-radius: 0;
      padding: 12px 18px;
      border-bottom: 1px solid $color-blue-grey-200;
      background-color: $inverse;
      min-width: $app-notebook-editor-min-width;
    }

    .md-input {
      padding: 13px 30px;
      height: calc(100% - #{$app-notebook-editor-header-height});
      min-width: $app-notebook-editor-min-width;
    }
  }

  @include media-breakpoint-down(xs) {
    .page {
      height: calc(100% - #{$site-footer-xs-height});
    }
  }
}