// RAMEN TOOLTIP COMPONENT
//
//
// Required Global Variables:
//
// None.
//
//
// Required Component Variables:
//
// $tooltip-text-color: Text colour of tooltip content container
// $tooltip-border-radius: Radius of tooltip content container
// $tooltip-background-color: Sets the button background of the tooltip content
// $tooltip-z-index: z-index of the tooltip content
// $tooltip-font-size: Font-size of the tooltip content
//
//

$placements: 'top', 'bottom', 'left', 'right';

@mixin tooltip {
  cursor: pointer;
}

.c-tooltip {
  @include tooltip;
}


/**
 * Tippy styling overrides
 *
 * Default SASS styling can be found here:
 * https://github.com/atomiks/tippyjs/blob/master/src/scss/tippy.scss
 */

.tippy-popper {
  z-index: $tooltip-z-index;

  @each $placement in $placements {
    &[x-placement^='#{$placement}'] {
      .tippy-backdrop {
        // Overriding default styling
        border-radius: $tooltip-border-radius;
      }

      .tippy-arrow {
        @if ($placement == 'top') {
          border-top-color: $tooltip-background-color;
        } @else if ($placement == 'bottom') {
          border-bottom-color: $tooltip-background-color;
        } @else if ($placement == 'left') {
          border-left-color: $tooltip-background-color;
        } @else if ($placement == 'right') {
          border-right-color: $tooltip-background-color;
        }
      }
    }
  }
}

.tippy-tooltip {
  background-color: $tooltip-background-color;
  border-radius: $tooltip-border-radius;
  color: $tooltip-text-color;
  font-size: $tooltip-font-size;
}

.tippy-roundarrow {
  fill: $tooltip-background-color;
}

.tippy-backdrop {
  background-color: $tooltip-background-color;
  border-radius: $tooltip-border-radius;
}