@import (reference) "../../../styles/_bootstrap.less";
@import (reference) "../../../styles/theme/_theme.less";
@import (reference) "../../../styles/_mixins.less";
@import (reference) "lesshat.less";

@dashboard-background: @gray-lighter;

body.application-dashboard {
  background-color: @dashboard-background;
}

dashboard-grid {
  display: block;
  margin: 0;
  padding: 5px;
}

.start-screen {
  margin: 20px;
  background-color: @gray-lighter;
  padding: 20px;
}

.gridster {
  list-style-type: none;
  display: block;
  background-color: @dashboard-background;
  margin: 0;
  padding: 0;

  .gs-resize-handle {
    background-position: 50% 50% !important;
    bottom: 0 !important;
    right: 0 !important;
    padding: 4px;
    height: 25px;
    width: 25px;
  }

  i.remove {
    cursor: pointer;
  }

  dashboard-panel {
    display: block;
    height: 100%;
    background: @panel-bg;
    color: @text-color;
    padding: 0;
    overflow: hidden;
    position: relative;

    .panel {
      margin: 0;
      // maintain the 100% height of the panel
      height: 100%;

      // flex layout allows us to define the visualize element as "fill available space"
      .display(flex);
      .flex-direction(column);
      .justify-content(flex-start);

      .panel-heading {
        .flex(0 0 auto);
        white-space: nowrap;
        display: flex;

        div.btn-group {
          white-space: nowrap;
          .flex(0 0 auto);
        }

        .panel-title {
          font-size: inherit;
          .ellipsis();
          .flex(1 1 0);
        }

        a {
          color: @text-color;
          border: none;
          background: none;
          padding: 0px 3px;
          &:hover {
            color: @link-hover-color;
          }
        }
      }

      .load-error {
        text-align: center;
        font-size: 1em;
        .display(flex);
        .flex(1 0 auto);
        .justify-content(center);
        .flex-direction(column);

        .fa-exclamation-triangle {
          font-size: 2em;
          color: @btn-danger-bg;
        }
      }

      .panel-content {
        display: flex;
        .flex(1, 1, 100%);
        height: auto;
      }
    }
  }
}

.dashboard-panel-picker > li.list-group-item {
  border-top: 0px;
}

.dashboard-load {
  margin: 10px;
}