/// ----------------------------------------------------------------------

/// Tooltip

/// ----------------------------------------------------------------------

@use 'spacing';
@use 'corners';
@use 'animations';
@use 'z-index';

/// -------------------
/// Tooltip config
/// -------------------

$padding-x: spacing.$md !default;
$padding-y: spacing.$xs !default;
$border-radius: corners.$base !default;
$bg-colour: #000 !default;
$arrow-size: 0.5rem !default;

/// -------------------
/// Popover swatches
/// -------------------

.tooltip {
  display: block;
  padding: 1rem;
  z-index: z-index.$tooltip;

  &:focus {
    outline: none;
  }
}

/// -------------------
/// Tooltip swatches
/// -------------------

.tooltip__body {
  background-color: $bg-colour;
  border-radius: $border-radius;
  padding: $padding-y $padding-x;
  color: white;
}

/// -------------------
/// Tooltip arrow
/// -------------------

.tooltip__arrow {
  position: absolute;
  width: $arrow-size;
  height: $arrow-size;

  &::before {
    content: '';
    position: absolute;
    width: $arrow-size;
    height: $arrow-size;
    background: $bg-colour;
    z-index: -1;
  }

  .tooltip[data-popper-placement^='left'] & {
    top: 50%;
    transform: translate3d(0px, -50%, 0px);
    right: -($arrow-size);
    clip-path: polygon(50% 50%, 0 100%, 0 0);
  }

  .tooltip[data-popper-placement^='right'] & {
    top: 50%;
    transform: translate3d(0px, -50%, 0px);
    left: -($arrow-size);
    clip-path: polygon(50% 50%, 100% 100%, 100% 0);
  }

  .tooltip[data-popper-placement^='top'] & {
    bottom: -($arrow-size);
    clip-path: polygon(50% 50%, 0 0, 100% 0);
  }

  .tooltip[data-popper-placement^='bottom'] & {
    top: -($arrow-size);
    clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
  }
}
