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

@import "../../common/variables";

/*
Callout

Markup:
<div class="#{$ns}-callout {{.modifier}}">
  <h5 class="#{$ns}-heading">Callout Heading</h5>
  It's dangerous to go alone! Take <a href="#">this</a>.
</div>

.#{$ns}-intent-primary - Primary intent
.#{$ns}-intent-success - Success intent
.#{$ns}-intent-warning - Warning intent
.#{$ns}-intent-danger  - Danger intent
.#{$ns}-icon-info-sign - With an icon

Styleguide callout
*/

$callout-padding: $pt-grid-size * 1.5;
$callout-header-margin-top: $pt-grid-size * 0.2;

.#{$ns}-callout {
  @include running-typography();
  background-color: rgba($gray3, 0.15);
  border-radius: $pt-border-radius;
  padding: $callout-padding;
  position: relative;
  width: 100%;

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

    &::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-grid-size * 0.7);

    > .#{$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: $pt-grid-size * 0.5;
    margin-top: $callout-header-margin-top;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .#{$ns}-dark & {
    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} {
      background-color: rgba($color, 0.1);
      color: map-get($pt-intent-text-colors, $intent);

      @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 & {
        background-color: rgba($color, 0.2);
        color: map-get($pt-dark-intent-text-colors, $intent);

        &[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-grid-size * 2) 0;
  }
}