/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import '~styles/variables.scss';
@import '../DataprepBrowserVariables.scss';

$header-border: #cccccc;
$header-bg: #eeeeee;
$content-font-color: #333333;
$hr_color: #999999;
$browser-header-height: 46px;

.kafka-browser {
  height: 100%;

  .kafka-browser-header,
  .kafka-browser-content {
    padding-left: 15px;
    padding-right: 15px;
  }

  .kafka-browser-content {
    height: calc(100% - #{$top-panel-height} - #{$browser-header-height});
  }

  .kafka-content-table {
    padding: 0;
    height: 100%;

    .row {
      margin: 0;
    }
    .kafka-content-header {
      border-bottom: 1px solid $header-border;
      border-top: 1px solid $header-border;
      background-color: $header-bg;
      line-height: 36px;
      font-weight: 600;
    }
    .kafka-content-body {
      height: calc(100% - 38px);
      overflow-y: auto;

      a:hover { text-decoration: none; }

      .content-row {
        border-bottom: 1px solid $header-border;
        line-height: 36px;
        color: $content-font-color;
        cursor: pointer;
        &:hover {
          background: $header-border;
        }
      }
    }
  }
  .tables-count {
    color: gray;
    font-size: 12px;
  }
  .kafka-browser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: $browser-header-height;

    .kafka-metadata { padding-left: 5px; }
  }
  .empty-search-container {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    width: 100%;

    .empty-search {
      font-size: 18px;
      font-weight: 500;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25vh;
      max-width: 80%;
      word-wrap: break-word;

      hr {
        color: $hr_color;
        background-color: $hr_color;
      }
      span {
        font-size: 14px;
      }
      ul {
        padding: 0;
        list-style: none;
        font-size: 14px;
        .link-text {
          cursor: pointer;
          color: var(--brand-primary-color);
        }
      }
    }
  }
}
