@import "../../mixins/utils/border-box.css";

@define-mixin popover-tooltip $direction {

  display:       inline-block;
  position:      relative;
  min-width:     9rem;
  padding:       .3em;
  background:    white;
  border:        1px solid $mountain;
  border-radius: $timestamp-tooltip-border-radius;
  text-align:    left;

  @if $direction == left {
    box-shadow:    .1em .1em .2em rgba(0, 0, 0, .3);
  }
  @else {
    box-shadow:    -.1em .1em .2em rgba(0, 0, 0, .3);
  }

  &:before {

    content:       ' ';
    display:       inline-block;
    position:      absolute;
    top:           calc(50% - .5em);
    width:         1em;
    height:        1em;
    background:    white;
    transform:     rotateZ(45deg);

    @if $direction == left {
      right:         calc(100% - .5em);
      border-left:   1px solid $mountain;
      border-bottom: 1px solid $mountain;
    }
    @else {
      left:         calc(100% - .5em);
      border-right: 1px solid $mountain;
      border-top:   1px solid $mountain;
    }

  }
}

@define-mixin popover-tooltip__list {
  position: relative;
  margin:     0;
  padding:    0;
  list-style: none;
  z-index: 1;
}

@define-mixin popover-tooltip__list__item {
  box-sizing:    border-box;
  padding:       .2em .5em;
  border-radius: $timestamp-tooltip-border-radius;
  font-weight:   bold;
  transition:
    background-color 0.1s ease,
    color 0.1s ease;

  &:hover {
    background: color($ruby saturation(- 2%) shade(10%));
    color:      $ruby;
    cursor:     pointer;
  }
}

@define-mixin popover-tooltip__list__item__link {
  display:         block;
  text-decoration: none;
  color:           inherit;
}