@import "patterns/stylesheets/settings.colors";

@import "patterns/stylesheets/mixins/settings.fonts";
@import "patterns/stylesheets/mixins/tools.functions";

@media (hover: hover) and (pointer: fine) {
  .c-tooltip {
    width: rem(345);
    border: 1px $color-stone-300 solid;
    background-color: $color-stone-100;
    position: fixed;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
  }
  .c-tooltip--revealed {
    transition: opacity 0.15s ease-in 1s;
    opacity: 1;
  }
  .c-tooltip--hidden {
    transition: opacity 0.15s ease-out;
    opacity: 0;
  }
  .c-tooltip__inner {
    margin: rem(5) rem(10);
    color: $color-grey-900;
    letter-spacing: rem(0.4);
    vertical-align: middle;
  }
  .c-tooltip__date {
    @include font-gm-sans-bold;
    font-size: rem(13);
    line-height: line-height(13, 18);
    text-transform: uppercase;
  }
  .c-tooltip__deck {
    @include font-gm-sans;
    font-size: rem(15);
    line-height: line-height(15, 18);
  }
}
