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

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

// We recommend wrapping the following rules in a media query like this, in
// order to prevent the Preview Tips from appearing on touch screen devices:
// @media (hover: hover) and (pointer: fine) and (min-width: 570rem) { ... }

.c-preview-tip {
  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-preview-tip--revealed {
  transition: opacity 0.15s ease-in 1s;
  opacity: 1;
}
.c-preview-tip--hidden {
  transition: opacity 0.15s ease-out;
  opacity: 0;
}
.c-preview-tip__inner {
  margin: rem(5) rem(10);
  color: $color-grey-900;
  letter-spacing: rem(0.4);
  vertical-align: middle;
}
.c-preview-tip__date {
  @include font-gm-sans-bold;
  @include css-variables("font-size", 13);
  line-height: line-height(13, 18);
  text-transform: uppercase;
}
.c-preview-tip__deck {
  @include font-gm-sans;
  @include css-variables("font-size", 15);
  line-height: line-height(15, 18);
}

