// Copyright 2017 The Kubernetes Authors.
//
// 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 '~@angular/material/theming';
@import 'variables';

@mixin kd-theme($theme, $colors) {
  $foreground-palette: map-get($theme, foreground);
  $background-palette: map-get($theme, background);

  $background: mat-color($background-palette, background);
  $card-background: mat-color($background-palette, card);
  $card-background-dark: darken($card-background, 5%);

  $muted: mat-color($foreground-palette, secondary-text);
  $muted-light: mat-color($foreground-palette, disabled);
  $border: mat-color($foreground-palette, divider);

  $box-shadow-1: rgba(0, 0, 0, .2);
  $box-shadow-2: rgba(0, 0, 0, .14);
  $box-shadow-3: rgba(0, 0, 0, .12);
  $box-shadow: 0 3px 1px -2px $box-shadow-1, 0 2px 2px 0 $box-shadow-2, 0 1px 5px 0 $box-shadow-3;
  $white: #fff;

  // Global style overrides.

  a {
    color: map-get($colors, primary);

    &:hover {
      color: map-get($colors, primary-hover);
    }
  }

  code {
    background-color: $card-background-dark;
  }

  * {
    &::-webkit-scrollbar-thumb {
      background-color: $border;
    }

    // Only show the scrollbar on hover, but always enable scrolling.
    .kd-nav {
      & > *:not(:hover) {
        &::-webkit-scrollbar-thumb {
          background-color: transparent !important;
        }
      }
    }
  }

  // Universal application styles.

  .kd-primary {
    color: map-get($colors, primary);
  }

  .kd-bg-primary {
    background-color: map-get($colors, primary);
  }

  .kd-accent {
    color: map-get($colors, accent);
  }

  .kd-success {
    color: map-get($colors, indicator-success);
  }

  .kd-bg-success {
    background-color: map-get($colors, indicator-success);
  }

  .kd-bg-success-light {
    background-color: lighten(map-get($colors, indicator-success), 60%);
  }

  .kd-warning {
    color: map-get($colors, indicator-warning);
  }

  .kd-bg-warning {
    background-color: map-get($colors, indicator-warning);
  }

  .kd-bg-warning-light {
    background-color: lighten(map-get($colors, indicator-warning), 20%);
  }

  .kd-error {
    color: map-get($colors, indicator-error);
  }

  .kd-bg-error {
    background-color: map-get($colors, indicator-error);
  }

  .kd-bg-error-light {
    background-color: lighten(map-get($colors, indicator-error), 33%);
  }

  .kd-help {
    color: $muted;
  }

  .kd-muted {
    color: $muted;
  }

  .kd-muted-light {
    color: $muted-light;
  }

  .kd-chart-green {
    color: map-get($colors, chart-green);
  }

  .kd-chart-blue {
    color: map-get($colors, chart-blue);
  }

  .kd-bg-background {
    background-color: $background;
  }

  .kd-loading-shade {
    background: $border;
  }

  .kd-bg-card-dark {
    background-color: $card-background-dark;
  }

  .kd-border {
    border: 1px solid $border;
  }

  .kd-white {
    color: $white;
  }

  // Component-level styles

  .kd-notifications-panel {
    background-color: $card-background;
    box-shadow: $box-shadow;
  }

  .kd-notification-unread {
    background-color: darken($background, 2.5%);
  }

  .kd-code-block {
    background-color: $border;
  }

  .kd-chips-show-button {
    color: map-get($colors, primary);

    &:hover {
      color: map-get($colors, primary-hover);
    }
  }

  .kd-minimized-card-header:hover {
    background: $border;
  }

  .kd-search {
    background-color: darken($background, 2.5%);

    input {
      color: mat-color($foreground-palette, base);
    }
  }

  .kd-nav-item-button {
    color: map-get($colors, toolbar-button);
  }

  .kd-nav-item-button-active {
    background-color: mat-color($background-palette, selected-button);
    color: map-get($colors, primary);
  }

  .kd-search-input {
    background: $card-background;
    border-bottom-color: $border;
    color: mat-color($foreground-palette, text);
  }

  .kd-graph-legend-entry {
    &:not(:last-child) {
      border-bottom: 1px solid $border;
    }
  }

  .mat-chip.mat-standard-chip {
    background: $card-background-dark;
  }

  .mat-active,
  .mat-selected {
    color: map-get($colors, primary) !important;
  }

  kd-namespace-selector {
    border: 1px solid $border;

    .kd-namespace-select {
      color: mat-color($foreground-palette, secondary-text);
    }

    .kd-namespace-select-input-container {
      .mat-form-field-underline {
        display: none;
      }

      .mat-select-arrow {
        color: $muted-light !important;
      }
    }
  }

  .kd-namespace-select-input {
    background: $card-background;
    color: mat-color($foreground-palette, secondary-text);
  }

  .kd-namespaced-item {
    background: $border;
    color: mat-color($foreground-palette, secondary-text);
  }

  .kd-namespace-select-input-border,
  .kd-shell-toolbar-select {
    border-bottom: 1px solid $border !important;
  }

  .kd-cross-line-primary {
    stroke: map-get($colors, primary);
  }

  .kd-cross-outline {
    stroke: $background;
  }

  .mat-button-toggle-group {
    border: 1px solid $border;
  }

  .mat-button-toggle-checked {
    background-color: $card-background-dark;
  }

  .kd-user-help {
    color: $muted;

    .material-icons {
      color: map-get($colors, primary);
    }
  }

  .mat-drawer-side {
    border-right: 0;
  }

  .mat-icon-button:hover:not([disabled]) {
    background-color: $border !important;
  }

  .c3-tooltip {
    color: $dark-primary-text;
  }

  .ngx-charts {
    text {
      fill: mat-color($foreground-palette, text) !important;
    }
  }

  .kd-secret-detail-text {
    .mat-form-field-infix {
      border-top: 0;
    }

    .mat-form-field-underline {
      background: none;

      .mat-form-field-ripple {
        background: none;
      }
    }

    textarea {
      background-color: $border;
      border: 0;
    }
  }

  .kd-edit-active {
    color: map-get($colors, primary);
  }

  .kd-volume-mounts {
    border: 1px solid $border;
  }

  .mat-list {
    border: 1px solid $border;
  }

  kd-logs {
    .kd-card-content {
      border-bottom: 1px solid lighten(map-get($colors, log-viewer-bg), 75%);
      border-top: 1px solid lighten(map-get($colors, log-viewer-bg), 75%);
    }

    .kd-log-line-container {
      background-color: map-get($colors, log-viewer-bg);
      color: map-get($colors, log-viewer-text);

      &::-webkit-scrollbar-thumb {
        background-color: map-get($colors, log-viewer-scrollbar);
      }

      &.kd-logs-text-color-invert {
        filter: invert(100%);
      }
    }
  }
}
