.outputpane-header {
  flex: 0 0 auto; // fixed vertical size (unlike grid, which grows)
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 1.5rem;

  .table-info-container {
    display: flex;
    margin-left: 3.25rem;
    align-items: center;
    height: 3.5rem;

    .table-info {
      text-align: center;
      margin-right: 3rem;
      height: 3rem;
      background-color: transparent;
      width: 7rem;

      .data {
        @extend .content-2;
        color: $labels;
        cursor: default;
      }
      .value {
        @extend .content-1;
        color: $brand-text--dark;
        margin-top: 0.7rem;
      }
    }

    // Row Action buton and menu
    .dropdown .table-action {
      @extend .action-button;
      @extend .button-orange--fill;
      min-width: 16.5rem;
      border-radius: 0.3rem;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('../images/caret-down-white.png');
      background-repeat: no-repeat;
      background-size: 1.3rem;
      background-position: 95% 47%;
      padding: 0 2rem 0 0;

      &:active {
        background-color: lighten($brand-orange, 18%);
        color: $brand-orange;
      }

      &:focus {
        background-color: lighten($brand-orange, 23%);
        color: darken($brand-orange, 10%);
      }

      &.disabled {
        pointer-events: none; // REACT not taking care of it
        background-color: $dark-accent--soft;
        color: $placeholder;
        opacity: 0.9;
        min-width: 16.5rem;
        cursor: default;
        background-image: url('../images/caret-down.png');
        background-position: 95% 52%;
        border-color: transparent;

        &:hover {
          background-color: transparent;
          color: $document-blue;
        }
        &:focus {
          background-color: transparent;
        }
      }
    }

    .dropdown-menu {
      border: 2px solid $data-action--border;

      &.show {
        button {
          @extend .dropdown-item;
          color: $brand-text--dark;

          &:hover {
            color: $brand-text--dark;
          }
        }
      }
    }
  }

  // button to export data in table header
  .export-table {
    @include export-link();
  }
}
