/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use 'sass:map';
@use '@carbon/colors' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/utils/hang' as *;
@use '../../globals/tokens/color-tokens' as *;

@mixin callout {
  :host(#{$c4d-prefix}-callout) {
    background-color: $background;
  }

  :host(#{$c4d-prefix}-callout[color-scheme='inverse']) {
    background-color: $background-inverse;
  }

  :host(#{$c4d-prefix}-callout[color-scheme='layer']) {
    background-color: $layer-01;
  }

  :host(#{$c4d-prefix}-callout[color-scheme='purple']) {
    background-color: $background-purple;
  }

  :host(#{$c4d-prefix}-callout[color-scheme='cyan']) {
    background-color: $background-cyan;
  }

  :host(#{$c4d-prefix}-callout-text),
  :host(#{$c4d-prefix}-callout-text[color-scheme='layer']) {
    color: $text-primary;
  }

  :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']) {
    color: $text-inverse;
  }

  :host(#{$c4d-prefix}-callout-text[color-scheme='purple']) {
    color: $text-purple;
  }

  :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']) {
    color: $text-cyan;
  }

  :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']),
  :host(#{$c4d-prefix}-callout-caption) {
    color: $text-secondary;
  }

  :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']) {
    color: $text-inverse;
  }

  :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']) {
    color: $caption-purple;
  }

  :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']) {
    color: $caption-cyan;
  }

  .#{$prefix}--callout__column {
    @include make-col-ready;
  }
  .#{$prefix}--callout__content {
    box-sizing: border-box;

    @include breakpoint(sm) {
      padding-block-start: $layout-03;
    }
    @include breakpoint(md) {
      @include make-col-offset(1, 8);
      @include make-col(6, 8);

      padding-block-start: $layout-05;
      padding-inline: $spacing-02;
    }
    @include breakpoint(lg) {
      padding-inline: $spacing-01;
      @include make-col-offset(1, 12);
      @include make-col(10, 12);
    }
  }
}