@import (reference) "~ui/styles/variables";
@import (reference) "~ui/styles/mixins";
@dashboard-background: @gray-lighter;

.tab-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;

          // flexbox fix for IE10
          // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
          display: inline-block;

          .ellipsis();
          flex: 1 1 auto;
        }

        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;
}