@use "sass:map";

.vuiCallout {
  width: 100%;
}

.vuiCallout--m {
  padding: $sizeM;

  .vuiCallout__closeButton {
    margin: -$sizeM * 0.5;
  }
}

.vuiCallout--s {
  padding: $sizeS;

  .vuiCallout__closeButton {
    margin: -$sizeS * 0.5;
  }
}

// Color
$color: (
  accent: (
    "border-color": var(--vui-color-accent-light-shade),
    "background-color": var(--vui-color-accent-lighter-shade)
  ),
  primary: (
    "border-color": var(--vui-color-primary-light-shade),
    "background-color": var(--vui-color-primary-lighter-shade)
  ),
  success: (
    "border-color": var(--vui-color-success-light-shade),
    "background-color": var(--vui-color-success-lighter-shade)
  ),
  warning: (
    "border-color": var(--vui-color-warning-light-shade),
    "background-color": var(--vui-color-warning-lighter-shade)
  ),
  danger: (
    "border-color": var(--vui-color-danger-light-shade),
    "background-color": var(--vui-color-danger-lighter-shade)
  ),
  neutral: (
    "border-color": var(--vui-color-medium-shade),
    "background-color": var(--vui-color-light-shade)
  )
);

@each $colorName, $colorValue in $color {
  .vuiCallout--#{$colorName} {
    border-radius: $sizeXxs;
    border: 1px solid #{map.get($colorValue, "border-color")};
    background-color: #{map.get($colorValue, "background-color")};
  }
}