// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:map";
@import "../../common/variables-extended";

$callout-padding: $pt-spacing * 4;
$callout-header-margin-top: $pt-spacing * 0.5;
$callout-padding-compact: $pt-spacing * 2;

.#{$ns}-callout {
  @include running-typography;
  border-radius: $pt-border-radius;
  padding: $callout-padding;
  position: relative;
  width: 100%;

  &:not(.#{$ns}-minimal) {
    background-color: rgba($gray3, 0.15);
  }

  // CSS API support
  &[class*="#{$ns}-icon-"] {
    padding-left: $callout-padding + $pt-icon-size-standard + ($pt-spacing * 2);

    &::before {
      @include pt-icon($pt-icon-size-standard);
      color: $pt-icon-color;
      left: $callout-padding;
      position: absolute;
      top: $callout-padding + $callout-header-margin-top;
    }
  }

  // High contrast mode hides backgrounds, so we need to use a border instead
  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    border: 1px solid $pt-high-contrast-mode-border-color;
  }

  &.#{$ns}-callout-icon {
    padding-left: $callout-padding + $pt-icon-size-standard + ($pt-spacing * 2);

    > .#{$ns}-icon:first-child {
      color: $pt-icon-color;
      left: $callout-padding;
      position: absolute;
      top: $callout-padding + $callout-header-margin-top;
    }
  }

  .#{$ns}-heading {
    line-height: $pt-icon-size-standard;
    margin-bottom: 0;
    margin-top: $callout-header-margin-top;
  }

  &.#{$ns}-callout-has-body-content {
    .#{$ns}-heading {
      margin-bottom: $pt-spacing;
    }
  }

  &.#{$ns}-compact {
    padding: $callout-padding-compact;

    &.#{$ns}-callout-icon {
      padding-left: $callout-padding-compact + $pt-icon-size-standard + ($pt-spacing * 2);

      > .#{$ns}-icon:first-child {
        left: $callout-padding-compact;
        top: $callout-padding-compact + $callout-header-margin-top;
      }
    }
  }

  .#{$ns}-dark & {
    &:not(.#{$ns}-minimal) {
      background-color: rgba($gray3, 0.2);
    }

    &[class*="#{$ns}-icon-"]::before,
    &.#{$ns}-callout-icon > .#{$ns}-icon:first-child {
      color: $pt-dark-icon-color;
    }
  }

  @each $intent, $color in $pt-intent-colors {
    &.#{$ns}-intent-#{$intent} {
      color: map.get($pt-intent-text-colors, $intent);

      &:not(.#{$ns}-minimal) {
        background-color: rgba($color, 0.1);
      }

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        border: 1px solid $pt-high-contrast-mode-border-color;
      }

      &[class*="#{$ns}-icon-"]::before,
      > .#{$ns}-icon:first-child,
      .#{$ns}-heading {
        color: map.get($pt-intent-text-colors, $intent);
      }

      .#{$ns}-dark & {
        color: map.get($pt-dark-intent-text-colors, $intent);

        &:not(.#{$ns}-minimal) {
          background-color: rgba($color, 0.2);
        }

        &[class*="#{$ns}-icon-"]::before,
        > .#{$ns}-icon:first-child,
        .#{$ns}-heading {
          color: map.get($pt-dark-intent-text-colors, $intent);
        }
      }
    }
  }

  &.#{$ns}-intent-primary {
    // special case for links inside primary intent callouts, which would otherwise not have any indication
    // that they are clickable links; see https://github.com/palantir/blueprint/issues/5853
    a {
      text-decoration: underline;

      &:hover {
        color: $blue1;
      }
    }

    .#{$ns}-dark & {
      a:hover {
        color: $blue6;
      }
    }
  }

  .#{$ns}-running-text & {
    margin: ($pt-spacing * 5) 0;
  }
}