@use "sass:math";
@use "sass:color";
@use "sass:map";
@use "variables" as *;

// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
  $r: color.channel($color, "red", $space: rgb);
  $g: color.channel($color, "green", $space: rgb);
  $b: color.channel($color, "blue", $space: rgb);

  $yiq: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);

  @if ($yiq >=$yiq-contrasted-threshold) {
    @return $dark;
  }

  @else {
    @return $light;
  }
}

/**
 * Severity classes
 */
@each $color, $value in $severity-colors {
  .alert.c-#{$color} {
    background-color: $value;
    color: color-yiq($value);
    font-weight: bold;

    .text-secondary {
      color: color-yiq($value) !important;
      font-weight: normal;
    }
  }

  .progress-bar.c-#{$color} {
    background-color: $value;
    border-color: $value !important;
  }

  .text-c-#{$color} {
    color: $value;
  }

  svg circle.c-#{$color} {
    fill: $value;
  }
}

$buffers-colors: (
  hit: map.get($severity-colors, 1),
  read: map.get($severity-colors, 2),
  dirtied: map.get($severity-colors, 3),
  written: map.get($severity-colors, 4),
  ) !default;


/**
 * Shared buffers classes
 */
@each $color, $value in $buffers-colors {
  .bg-#{$color} {
    background-color: $value;
  }

  .border-#{$color} {
    border-color: $value !important;
  }
}


.btn-group-xs>.btn,
.btn-xs {
  padding: .25rem .4rem;
  font-size: $font-size-sm;
  border-radius: .2rem;

  &,
  .fa {
    line-height: .5;
  }
}

/*
 * Used with @extend in .plan-node.never-executed
 */
%bg-hatched {
  $color: $gray-lightest;
  $angle: 45deg;
  $progress-height: 1rem !default;
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent
  );
background-size: $progress-height $progress-height;
}

.bg-hatched {
  @extend %bg-hatched;
}

.border-dashed {
  border-style: dashed !important;
  background-color: transparent !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.opacity-20 {
  opacity: 0.2 !important;
}
