// Foundation for Emails
// get.foundation/ink/
// Licensed under MIT Open Source
@use "sass:color";

////
/// @group callout
////

/// Background color of a callout.
/// @type Color
$callout-background: $white !default;

/// Fade value for callout backgrounds.
/// @type Number
$callout-background-fade: 85% !default;

/// Padding inside a callout.
/// @type Length
$callout-padding: 10px !default;

/// Padding inside a callout on small screens.
/// @type Length
$callout-padding-small: $callout-padding !default;

/// Bottom margin of a callout.
/// @type Length
$callout-margin-bottom: $global-margin !default;

/// Border around a callout.
/// @type Border
$callout-border: 1px solid color.adjust($callout-background, $lightness: -20%, $space: hsl) !default;

/// Border around a callout with the `.primary` class.
/// @type Border
$callout-border-primary: 1px solid color.adjust($primary-color, $lightness: -20%, $space: hsl) !default;
$callout-background-primary: color.scale($primary-color, $lightness: $callout-background-fade) !default;

/// Border around a callout with the `.secondary` class.
/// @type Border
$callout-border-secondary: 1px solid color.adjust($secondary-color, $lightness: -20%, $space: hsl) !default;
$callout-background-secondary: color.scale($secondary-color, $lightness: $callout-background-fade) !default;

/// Border around a callout with the `.success` class.
/// @type Border
$callout-border-success: 1px solid color.adjust($success-color, $lightness: -20%, $space: hsl) !default;
$callout-background-success: color.scale($success-color, $lightness: $callout-background-fade) !default;

/// Border around a callout with the `.warning` class.
/// @type Border
$callout-border-warning: 1px solid color.adjust($warning-color, $lightness: -20%, $space: hsl) !default;
$callout-background-warning: color.scale($warning-color, $lightness: $callout-background-fade) !default;

/// Border around a callout with the `.alert` class.
/// @type Border
$callout-border-alert: 1px solid color.adjust($alert-color, $lightness: -20%, $space: hsl) !default;
$callout-background-alert: color.scale($alert-color, $lightness: $callout-background-fade) !default;

table.callout {
  margin-bottom: $callout-margin-bottom;
  Margin-bottom: $callout-margin-bottom;
}

th.callout-inner {
  width: 100%;
  border: $callout-border;
  padding-top: $callout-padding;
  padding-right: $callout-padding;
  padding-bottom: $callout-padding;
  padding-left: $callout-padding;
  background: $callout-background;

  &.primary {
    background: $callout-background-primary;
    border: $callout-border-primary;
    color: $black;
  }

  &.secondary {
    background: $callout-background-secondary;
    border: $callout-border-secondary;
    color: $black;
  }

  &.success {
    background: $callout-background-success;
    border: $callout-border-success;
    color: $black;
  }

  &.warning {
    background: $callout-background-warning;
    border: $callout-border-warning;
    color: $black;
  }

  &.alert {
    background: $callout-background-alert;
    border: $callout-border-alert;
    color: $black;
  }
}