/*
 * 
 *   Copyright 2016 RIFT.IO 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 "style/_colors.scss";
@import "style/layout.scss";
@import '../node_modules/open-iconic/font/css/open-iconic.css';

/*
.dashboardCard {
  height: auto;
}*/

// Defaults for grid elements. TBD where we place this on completion of task

.grid.categorySeverityGrid {
  display: flex;
  flex: 1;
  flex-direction: column;

  .gridCell {
    display: flex;
    flex: 1 0 auto;
    // top right bottom left
    padding: 0.1rem 0 0.1rem 0.5rem;
  }
  .gridRow {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    padding-top: 1px;
  }
  .gridHead {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    background-color: $gray;
    text-transform: uppercase;
    .gridCell {
      border: 1px solid black;
      //flex: 1 0 auto;
    }
  }
  .gridBody {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }
  .gridBody .gridRow:nth-child(odd) {
    background-color: $gray-lighter;
  }
  .gridBody .gridRow:nth-child(even) {
    background-color: $gray-lightest;
  }
  .noRows {
    text-align: center;
    font-style: italic;
    font-size: large;
    padding-top: 1rem;
  }
  .gridCell.category {
    width: 150px;
  }
  .gridCell.severity {
    width: 100px;
  }
} // .gird.categorySeverityGrid

.cardSection {
  //margin: 0 0.5rem 0.5rem;  
}
.cardSectionHeader {
  text-decoration-line: underline;
  text-transform: uppercase;
  border-bottom: 1px solid black;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  
}

.textBox {
  margin-right: 0.5rem;
  // https://css-tricks.com/almanac/selectors/p/placeholder/
  font-size: medium;
  flex: 1;
  &::-webkit-input-placeholder {
    font-style: italic;
  }
}

// .app-body should be promoted to a higher level
.app-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.loggingPage {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
  &.loggingGeneral {
    
  }
}
.panelContainer {
  display: flex;
  flex: 1;
  flex-direction: row;

}

.loggingPanel {
  display: flex;
  flex: 1 100%;
  height: auto !important;
  header {
    background-color: white;
    display: block;
  }
}

.defaultCategorySeverityPanel {
  @extend .loggingPanel;
  min-width: 20rem;
  max-width: 20rem;
}

.loggingEventsPanel {
  @extend .loggingPanel;
  .textBox {
    &.invalidValue {
      border: 1px solid red;
    }
  }
  &-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow-y: scroll;
    padding: 0.5rem;
  }
  .radioButtonGroupHeader {
    text-transform: uppercase;
  }
  .radioButtonGroup {
    display: flex;
    flex-direction: row;
    .radioItem {
      margin-left: 1rem;
      margin-top: 0.2rem;

    }
  }
}

.loggingGeneralDetailsPanel {
  @extend .loggingPanel;
  .syslogViewer {
    display: flex;
    flex: 0;
    flex-direction: column;
  }
  &-body {
    // top right bottom left
    //padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: 0.5rem;
  }
  .section.syslogViewerSection {
    .sectionLabel {

    }
    .syslogViewerControls {
      display: flex;
      flex: 1;
      flex-direction: row;
      margin-top: 0.25rem;
    } 
  }
  .goButton {
    cursor: pointer;
    border: 1px solid $gray-dark;
    background-color: $gray-dark;
    margin: 2px;
    border-radius: 3px;
    span {
      padding-left: 3px;
      padding-right: 3px;
    }
  }
}

.loggingPageFooter {
  display: flex;
}

.loggingFormButtonGroup {
  justify-content: center;
  align-items: center;
  display:flex;
  flex: 1;
  padding: 1rem;
}  

.denyEventsEditGroup {
  display: flex;
  flex-direction: column;

  .eventEditRow {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .removeButton {
    flex: 0;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 5px;
    background-color: black;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding-left: 2px;
    padding-right: 2px;
    color: white;
    span {
      //margin-top: 2px;
      vertical-align: middle;
    }
  }
}

.plusButton {
  flex: 0;
  cursor: pointer;
  //padding: 2px;
  margin-top: 0.5rem;
  color: white;
  span {
    border: 1px solid black;
    background-color: black;
    border-radius: 4px;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }
}