@import "../../../sass/webpack_deps";

.lp-poi-callout {
  background-color: $color-white;
  box-shadow: .15rem .26rem 2.9rem rgba($color-black, .08);
  display: block;
  max-height: 30rem;
  max-width: 25rem;
  padding: 2rem;
  transition: 1000ms ease;
  width: 25rem;
  z-index: z("middle");

  .no-js & {
    display: none;
  }

  body > & {
    position: absolute;
  }

  &.is-invisible {
    opacity: 0;
    visibility: hidden;
  }

  &.is-visible {
    opacity: 1;
    transform: translateX(-15px);
    transition: 200ms ease 150ms;
    visibility: visible;
  }
}

.lp-poi-callout__excerpt {
  $_font-size: 1.4rem;
  $_line-height: (22 / 14);
  @include line-clamp($_font-size, $_line-height, 3);
  color: $titlegray;
  font-size: $_font-size;
  font-weight: 300;
  line-height: $_line-height;
  margin-bottom: 0;
  margin-top: 1.6rem;
}

.lp-poi-callout__image {
  margin-bottom: 1.8rem;
}

.lp-poi-callout__title {
  color: $darkgray;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: (20 / 16);
  transition: color 200ms ease;

  .lp-poi-callout:hover &,
  .lp-poi-callout:active &,
  .lp-poi-callout:focus & {
    color: $lpblue;
  }
}

.lp-poi-callout__type {
  color: $light-text-color;
  font-family: $miller-daily;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  margin-top: .5rem;
  text-transform: capitalize;
}