@import "morris";
@import "bootstrap/variables";
$tab-margin: 44px !default;
$title-text-color: #4e4a42 !default;
$body-background-color: #f0f0f0 !default;
$tab-active-accent-color: $brand-primary !default;
$admin-sidebar-background-color: #5c5c5c !default;
$admin-sidebar-profile-background-color: #505050 !default;
$admin-sidebar-section-heading-color: #dedede !default;
$admin-sidebar-link-color: #ffffff !default;
$admin-sidebar-link-hover-color: #000000 !default;
$admin-sidebar-link-background-color: #eeeeee !default;
$admin-content-background-color: #f0f0f0 !default;
$admin-vertical-padding: 0 !default;
$admin-panel-border-color: #dedede !default;

.works-list {
  .highlighted-work {
    color: #ffd700;
    background-color: $gray-light;
    border-radius: 10px;
    padding: 2px;
  }

  .workflow-state {
    white-space: nowrap;
  }

  .media-body {
    width: 18vw;
  }
}

.batch-checkbox-label-text {
  margin: 0 5px;
}

body.dashboard {
  background-color: $body-background-color;
  padding-top: 3.5rem;
}

.dashboard {
  .count-display {
    font-size: 1.1em;
  }

  /* This is needed in Chrome for the admin/admin_sets edit view AND the collection
   * sharing edit view to render the participants tab
   * Without this the contents of that tab flow off the right-hand side of the screen
   * (The other containers on that page have `float: left` except for the fieldset.)
   */
  .admin-set-participants {
    float: left;
  }

  .collection-sharing {
    float: left;
  }

  .main-header {
    margin-bottom: 0;
    margin-top: 0;

    h1 {
      font-size: $h2-font-size;
      margin-left: $table-cell-padding-sm;
      margin-top: $input-btn-padding-y;

      .fa {
        color: $gray;
        margin-right: $table-cell-padding-sm;
      }
    }

    .btn {
      margin-bottom: $input-btn-padding-y;
    }
  }

  // the span selector is required because Blacklight is using it.
  .list-filters-label,
  span.constraints-label {
    font-weight: bold;
    margin-right: 2em;
  }

  .constraints-container {
    padding: $card-spacer-y $card-spacer-x;

    .start-over {
      padding: 4px 6px;
    }
  }

  .table {
    .date,
    .action {
      width: 13ch;
    }
  }

  .list-filters {
    background-color: $card-cap-bg;
    margin-bottom: 20px;
    padding: $card-spacer-y $card-spacer-x;

    .btn-group > .facet-values {
      display: none;
    }
    .btn-group.show > .facet-values.show {
      display: table;
    }

    .facet-values {
      width: 20em; // TODO: make this responsive.
    }

    .facet-label {
      padding: 3px 20px;
      font-weight: 400;
      line-height: 1.42857143;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .facet-count {
      padding: 3px 20px;
      font-weight: 400;
      line-height: 1.42857143;
      color: #333;
      white-space: nowrap;
    }
  }

  .sort-toggle {
    padding: 0;
  }

  .user-activity .card-body {
    overflow: scroll;
    max-height: 20em;
  }

  .transfer_link {
    margin-top: 8px;
  }

  #incoming-transfers .btn {
    margin-bottom: 6px;
  }

  .workflow-roles {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;

    .fa-remove {
      color: $brand-danger;
    }
  }

  .navbar {
    margin-bottom: 0;
  }

  .card.labels {
    border-top: 1px solid $card-border-color;
    margin-bottom: 0;
  }

  .spacer {
    margin-bottom: 5px;
  }
}

.dropdown-item {
  display: list-item;

  > .facet-values {
    display: table;
    table-layout: fixed;

    > .facet-label {
      display: table-cell;
      hyphens: auto;
      text-indent: -0.938rem;
    }

    > .facet-count {
      display: table-cell;
      text-align: right;
    }
  }
}

ul#visibility_ssi-dropdown-options {
  table-layout: fixed;

  > li {
    display: table-row;

    > .facet-label {
      display: table-cell;
      hyphens: auto;
    }

    > .facet-count {
      display: table-cell;
      text-align: right;
    }
  }
}

.card.tabs {
  background-color: transparent;

  > .card-body {
    background-color: white;
  }
}

#form_workflows .card-body .radio label span input {
  margin-right: 0.5rem;
}

div.main-content.maximized.admin-stats {
  background-color: white;
}