.notification {
  position: fixed;
  top: em(80px);
  right: em(30px);
  width: em(260px);
  z-index: 1000;
  height: auto;
  background: $white;
  box-shadow: 0 0 em(30px) rgba($black, 0.2);
  transform: scale(0);
  opacity: 0;
  transform-origin: 70% 5%;
  transition: transform 0.3s $easeOutQuad, opacity 0.3s $easeOutQuad;
  &:before {
    content: '';
    display: block;
    background: $white;
    z-index: -2;
    position: absolute;
    top: em(-10px);
    right: em(70px);
    width: em(20px);
    height: em(20px);
    transform: rotate(45deg);
    box-shadow: 0 0 30px rgba($black, 0.2);
  }
  .notification_open & {
    opacity: 1;
    transform: none;
  }
  .cms-toolbar-expanded & {
    margin-top: 46px;
  }
  @media screen and (max-width: $medium_breakpoint) {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%) scale(0);
    transform-origin: 50% 50%;
    .notification_open & {
      transform: translate(50%, -50%) scale(1);
      &:after {
        opacity: 0.4;
        transition: opacity 0.15s $easeOutQuad 0.15s;
      }
    }
    &:before {
      display: none;
    }
    &:after {
      content: '';
      display: block;
      background: $black;
      position: absolute;
      z-index: -1;
      top: -100vh;
      left: -100vw;
      right: -100vw;
      bottom: -100vh;
      opacity: 0;
      transition: opacity 0.15s $easeOutQuad;
    }
  }
}

.notification__content {
  width: 100%;
  height: auto;
  padding: em(20px) em(30px);
  position: relative;
  overflow: auto;
  max-height: 70vh;
  background: $white;
}

.notification__title {
  line-height: 1.35;
  color: $green;
  font-size: em(18px);
  font-weight: 700;
  padding-right: em(55px);
  margin-bottom: em(10px);
}

.notification__text {
  line-height: 1.4;
  color: $dark_gray;
  font-size: em(14px);
}

.notification__button {
  margin-top: em(20px);
  height: em(38px) !important;
  line-height: em(36px) !important;
  font-size: em(12px) !important;
  svg {
    width: em(24px) !important;
    height: em(24px) !important;
    margin: em(7px) 0 !important;
  }
}

.notification__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: em(25px);
  svg {
    width: em(20px);
    height: em(20px);
    fill: $dark_gray;
    transition: fill 0.3s;
  }
  &:hover {
    svg {
      fill: $near_black;
    }
  }
}