@use "sass:map";

.vuiPrompt {
  position: relative;
  border-radius: $sizeM;
  transition: all $transitionSpeed;
  word-wrap: break-word;
}

.vuiPrompt--speechBubble {
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    left: 48px;
    border-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-width: 20px;
    margin-left: -20px;
    margin-bottom: -20px;
    border-top-color: var(--vui-color-light-shade);
    border-bottom: 0;
  }
}

.vuiPrompt--interactive {
  &:hover {
    background-color: var(--vui-color-accent-lighter-shade);
    color: var(--vui-color-accent-shade);
  }
}

// Color
$color: (
  danger: (
    "color": var(--vui-color-danger-shade),
    "background-color": var(--vui-color-danger-lighter-shade)
  ),
  neutral: (
    "color": var(--vui-color-dark-shade),
    "background-color": var(--vui-color-light-shade)
  )
);

@each $colorName, $colorValue in $color {
  .vuiPrompt--#{$colorName} {
    color: #{map.get($colorValue, "color")};
    background-color: #{map.get($colorValue, "background-color")};
  }
}

// Padding
$padding: (
  paddingXs: $sizeXs,
  paddingS: $sizeS,
  paddingM: $sizeM,
  paddingL: $sizeL,
  paddingXl: $sizeXl,
  paddingXxl: $sizeXl * 2
);

@each $paddingName, $paddingValue in $padding {
  .vuiPrompt--#{$paddingName} {
    padding: $paddingValue;
  }
}