.sticky-cta {
  position: fixed;
  z-index: 500;
  bottom: 16px;
  right: 32px;

  @include sm {
    right: 16px;
    bottom: 16px;
  }

  &__box {
    position: relative;
  }

  &__content {
    width: 400px;
    background: $primary-color;
    color: $white;
    padding: 16px 40px 16px 90px;
    opacity: 0;
    transition: opacity 0.25s ease-out;

    .sticky-cta--no-image & {
      width: 330px;
      padding: 16px 40px 16px 28px;
    }

    .sticky-cta--light-blue & {
      color: $primary-color;
      background: $background-blue;
    }

    @include sm {
      width: 313px;
      padding: 16px 40px 16px 50px;

      .sticky-cta--no-image & {
        width: 343px;
      }
    }
  }

  &__wrapper {
    width: 54px;
    height: 59px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 20px 26px -23px transparent;
    transition: all 0.25s ease-out;

    @include sm {
      width: 46px;
      height: 54px;
    }
  }

  &__title {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 2.9rem;
  }

  &__subtitle {
    letter-spacing: 0.23px;
    font-size: 1.6rem;
    line-height: 2.3rem;
  }

  &__image {
    position: absolute;
    width: 86px;
    height: 86px;
    left: -47px;
    top: -24px;
    border: 3px solid rgba(247,248,249,0.2);
    border-radius: 50%;
    transition: all 0.25s ease-out;
    cursor: pointer;

    @include sm {
      width: 79px;
      height: 79px;
    }

    & > div {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 20px 26px -23px $primary-color;
    }

    img {
      display: block;
      width: 100%;
    }

    .sticky-cta--no-image & {
      display: none;
    }

    .js-open & {
      cursor: default;
      pointer-events: none;
    }
  }

  &__cta {
    margin-top: 16px;

    .std-button {
      padding: 0 16px;
    }
  }

  &__open {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 10px 16px -13px $primary-color;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease-out;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: $topic-orange;
      transform: scale(1);
    }

    svg {
      position: relative;
      display: block;
      width: 18px;
      height: 18px;

      path {
        fill: $white;
      }
    }
  }

  &__close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    display: block;
    color: $primary-color;
    background-color: $white;
    border-radius: 50%;

    &::after {
      content: " ";
      position: absolute;
      top: 7px;
      left: 8px;
      width: 7px;
      height: 7px;
      display: inline-block;
      border-right: 2px solid;
      border-top: 2px solid;
      border-radius: 1px;
      transform: rotate(135deg);
      vertical-align: baseline;
    }
  }

  &.js-open {
    .sticky-cta__content {
      opacity: 1;
    }

    .sticky-cta__wrapper {
      box-shadow: 0 20px 26px -23px $primary-color;
    }

    .sticky-cta__image {
      width: 123px;
      height: 123px;

      @include sm {
        width: 86px;
        height: 86px;
        left: -40px;
        top: 3px;
      }
    }

    .sticky-cta__open {
      opacity: 0;
      pointer-events: none;

      &::before {
        transform: scale(2);
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      }
    }
  }
}