// Variables
$notice_error_background_color: #fa7c73;
$notice_error_border_color: #dd4a4a;

$notice_success_background_color: #73bc76;
$notice_success_border_color: #4caf50;

$badge_success_background_color: #4caf50;
$badge_error_background_color: #f44336;

$box_border_color: #cbcbcb;
$box_box_shadow_color: #e1e1e1;

$heading_color: #222;

$log_level_debug_background_color: #4caf50;
$log_level_info_background_color: #2196f3;
$log_level_warning_background_color: #ff9800;
$log_level_error_background_color: #f44336;

.font-weight-bold {
   font-weight: bold;
}

.font-weight-light {
   font-weight: lighter;
}

// Custom Tabs
.replicant-tab {
  padding: 20px;
  border: 1px solid #000;
  display: none;
}

.replicant-tab.active {
  display: block;
}

.replicant-nav-tab {
  display: inline-block;
  padding: 20px;
}

.replicant-nav-tab.active {
  color: #ff4200;
}

// Dashboard Panel Wrapper
#panel_settings {
   position: relative;
   display: flex;
   flex-direction: row;

   .right_side {
      flex: 1;
      text-align: center;
      margin-left: 5px;
   }

   .left_side {
      margin-right: 5px;
      width: 80%;
   }
}

// Custom Badge
.replicant-badge {
   color: white;
   border-radius: 5px;
   padding: 5px 10px;

   &-success {
      background: $badge_success_background_color;
      cursor: default;
   }

   &-error {
      background: $badge_error_background_color;
      cursor: not-allowed;
   }
}

// Custom Notice
.replicant-notice {
   padding: 0.7rem 1rem;
   color: white;
   border-radius: 5px;
   border: 1px solid;

   &-error {
      background: $notice_error_background_color;
      border-color: $notice_error_border_color;
   }

   &-success {
      background: $notice_success_background_color;
      border-color: $notice_success_border_color;
   }
}

// Custom box
.replicant-box {
   background: white;
   border: 1px solid $box_border_color;
   padding: 10px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 5px $box_box_shadow_color;
   margin-bottom: 2em;

   .replicant-heading {
      border-bottom: 1px solid $box_border_color;
      padding: 10px;
      margin: 0;
      color: $heading_color;
   }
}

// Custom heading
.replicant-heading {
   font-size: 20px;
   font-weight: bold;
}

// Logs
.replicant-logs-container {
   ul {
      li {
         display: flex;
         justify-content: space-between;
         margin-bottom: 5px;
      }

      span {
         display: inline-block;
         padding: 5px;
         font-size: 14px;
         color: white;
         border-radius: 5px;
         color: $heading_color;
      }

      .log-message {
         background: #f7f7f7;
         margin-right: 5px;
         flex: 1;
      }

      .log-level {
         color: white;
         margin-right: 5px;
         margin-left: 5px;

         &-0 { background: $log_level_debug_background_color }
         &-1 { background: $log_level_info_background_color }
         &-2 { background: $log_level_warning_background_color }
         &-3 { background: $log_level_error_background_color }
      }
   }
}

// Node information
.replicant-node-information {
   padding: 10px;
   color: white;
   background: #2196f3;
   border-radius: 5px;
   margin: 0;
   margin-top: 10px;
   display: inline-block;
   max-width: 100%;

   li {
      display: flex;
      align-items: center;
      flex-direction: row;
      margin: 5px 0;
   }

   span {
      display: inline-block;
   }

   .node-information-head {
      margin-right: 5px;
      background: white;
      padding: 5px;
      border-radius: 5px;
      color: #2196f3;
      min-width: 35px;
      text-align: center;
   }

   .node-information-value {
      flex: 1;
      text-align: right;
   }
}