@import "settings.global";

@mixin bubble {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: $bubble-padding;
  background-color: $bubble-background-color;
  color: $bubble-color;
  text-align: $bubble-text-align;
  border-radius: $bubble-border-radius;
}

@mixin bubble__arrow {
  &:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: $bubble-arrow-width solid transparent;
  }
}

@mixin bubble__arrow--top {
  &:after {
    bottom: -($bubble-arrow-width * 2);
    left: 50%;
    transform: translateX(-50%);
    border-top-color: $bubble-background-color;
  }
}

@mixin bubble__arrow--right {
  &:after {
    top: 50%;
    left: -($bubble-arrow-width * 2);
    transform: translateY(-50%);
    border-right-color: $bubble-background-color;
  }
}

@mixin bubble__arrow--bottom {
  &:after {
    top: -($bubble-arrow-width * 2);
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: $bubble-background-color;
  }
}

@mixin bubble__arrow--left {
  &:after {
    top: 50%;
    right: -($bubble-arrow-width * 2);
    transform: translateY(-50%);
    border-left-color: $bubble-background-color;
  }
}