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

$lp-sticky-footer-height: 7.6rem;

.lp-sticky-footer {
  @media (max-width: $max-720) {
    display: none;
  }

  @media (min-width: $min-720) {
    backface-visibility: hidden;
    background-color: $color-white;
    bottom: 0;
    box-shadow: 0 0 4rem .7rem rgba(lighten($color-black, 20), .05);
    font-size: 1.4rem;
    font-weight: 300;
    height: $lp-sticky-footer-height;
    left: 0;
    line-height: (22 / 14);
    position: fixed;
    transform: translateY(0);
    transition: transform $animation-speed ease-in-out;
    width: 100%;
    z-index: z("global-header");
  }

  &.off-screen {
    @media (min-width: $min-720) {
      transform: translateY($lp-sticky-footer-height);
    }
  }
}

.lp-sticky-footer__current-item,
.lp-sticky-footer__next-item {
  @media (min-width: $min-720) {
    max-width: 30rem;
    overflow: hidden;
    padding: 2.8rem 0 2.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.lp-sticky-footer__current-item {
  @media (min-width: $min-720) {
    float: left;
  }
}

.lp-sticky-footer__next-item {
  @media (min-width: $min-720) {
    color: currentColor;
    float: right;
    font-weight: 400;
  }

  &::before {
    @media (min-width: $min-720) {
      color: rgba($light-text-color, .5);
      content: "Next – ";
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: .04rem;
      text-transform: uppercase;
    }
  }
}