/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

// Copies over styling from eui library to be used in custom classes
// Core
$euiColorPrimary: #006BB4 !default;
$euiColorDarkestShade: #343741 !default;
$euiColorGhost: #FFF !default;
$euiColorInk: #000 !default;
$euiTextColor: $euiColorDarkestShade !default;

@import "./components/Charts/ChartContainer.scss";
@import "./pages/Overview/components/Widgets/WidgetContainer.scss";
@import "./pages/Main/components/Callout.scss";
@import "./pages/Detectors/components/ReviewFieldMappings/ReviewFieldMappings.scss";
@import "./pages/Correlations/Correlations.scss";
@import "./pages/Correlations/components/FindingCard.scss";
@import "./pages/Findings/components/CorrelationsTable/CorrelationsTable.scss";
@import "./pages/Rules/components/RuleEditor/RuleEditorForm.scss";
@import "./pages/Rules/components/RuleEditor/DetectionVisualEditor.scss";
@import "./pages/Rules/components/RuleEditor/components/SelectionExpField.scss";

.selected-radio-panel {
  background-color: tintOrShade($euiColorPrimary, 90%, 70%);
  border-color: $euiColorPrimary;
}

@function tintOrShade($color, $tint, $shade) {
  @if (lightness($euiTextColor) > 50) {
    @return shade($color, $shade);
  } @else {
    @return tint($color, $tint);
  }
}

@function tint($color, $percent) {
  @return mix($euiColorGhost, $color, $percent);
}

@function shade($color, $percent) {
  @return mix($euiColorInk, $color, $percent);
}

.euiLoadingContent__singleLineBackground {
  background: linear-gradient(137deg, #d3dae6 45%, #bac0ca 50%, #d3dae6 55%) !important;
}

.refresh-button {
  min-width: 0;
  .euiButtonContent {
    .euiButton__text {
      margin: 0;
    }
  }
}

.state-accordion:hover {
  text-decoration: none;
}

.vg-tooltip {
  background-color: #404040 !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0 !important;
  font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
  font-weight: 600 !important;
  font-size: 12px !important;

  .vg-tooltip-innerContainer {
    .vg-tooltip-header {
      padding: 4px;
      border-bottom: 1px solid gray;

      table tr:nth-child(odd) {
        background-color: #535353 !important;
      }

      td:nth-child(1) {
        position: relative;
        width: 6px;
        padding: 0 0 0 2px !important;

        .vg-tooltip-color {
          width: 4px;
          position: absolute;
          top: 2px;
          height: calc(100% - 4px);
        }
      }

      td:nth-child(3) {
        padding-right: 8px !important;
        text-align: right;
      }
    }

    .vg-tooltip-body {
      padding: 4px;

      table tr:nth-child(even) {
        background-color: #535353 !important;
      }

      td:nth-child(2) {
        text-align: right;
      }
    }

    table {
      width: 100%;

      tbody tr {
        td {
          height: 28px;
          padding: 4px !important;
          vertical-align: middle !important;
        }

        td:nth-child(1) {
          padding-right: 10px !important;
          font-weight: 400 !important;
        }
      }
    }
  }
}

.sa-overview-widget-empty tbody > .euiTableRow > .euiTableRowCell {
  border-bottom: none;
}

.detailsFormRow {
  width: auto !important;
}

.empty-text-button {
  vertical-align: baseline;

  .euiButtonEmpty__content {
    padding: 0 !important;
  }
}