@import (reference) "./_logical-properties.less";
@import (reference) "./_arrows.less";

/**
 * DEPRECATED: use <InfoPrompt /> component instead
 */

.alert-variant(@background; @text-color; @text-hover) {
  background-color: @background;
  color: @text-color;

  a,
  b,
  strong,
  .close,
  .alert-link,
  .icon {
    color: @text-color;
  }

  a:hover,
  a:focus,
  .alert-link:hover,
  .alert-link:focus,
  .close:hover,
  .close:focus {
    color: @text-hover;
  }
}

.alert-arrow(@size: 10px) {
  position: relative;
  .arrow-pointer(@size);

  &::before {
    clip-path: polygon(0% 0%, 0 100%, 100% 0);
  }
  .arrow-positions(@size);
}