.popover {
  border-radius: $border-radius--l;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(-$baseline * 0.5);
  transition: opacity $transition-duration--fast, visibility $transition-duration--fast, transform $transition-duration--fast;
  width: $popover-width;
  z-index: 3;

  &::before {
  border-radius: $border-radius;
  background: $popover-arrow;
  content: '';
  height: $baseline * 2.5;
  position: absolute;
  right: 70px;
  top: -$spacing--xxs;
  transform: rotate(45deg);
  width: 25px;
}

  &--arrow-right::before { right: 35px; }
  &--arrow-center::before { left: 47%; }
  &--arrow-left::before { left: 35px; }

  &__dialog {
    max-height: 0; // make sure dialog doesn't take up place when not visible
    overflow: hidden;
    padding: $spacing--m;
    transition: max-height 0s $transition-duration--fast;
  }

  &--active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);


    .popover__dialog {
      max-height: $baseline * 60;
      transition: max-height 0s 0s;
    }
  }

  &__title {
    @include font-style('title--s', 'title--s');
    color: $color-brand--two;
    font-family: $popover-title-text-font;
    text-transform: $popover-title-text-transform;
  }

  &__message {
    margin-top: $spacing--xs;

    p:last-child {
      margin: 0;
    }
  }

  &__description {
    &, p {
      margin-bottom: $spacing--s;
    }
  }

  &__action {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-top: $spacing--m;
    padding-bottom: $spacing--m;

    .button {
      margin-right: 20px;
    }
  }

  &__footer {
    margin-top: $spacing--s;

    p {
      margin-bottom: 0;
    }
  }
  // form group
  .form-group {
    margin-top: $spacing--m;

    &__input + .form-group__input {
      margin-top: $spacing--xs;
    }
  }
  // link list
  .link-list {
    margin-top: $spacing--m;

    &__item {
      width: 100%;

      &:first-child {
        border-top: 1px solid $color--grey;
      }
    }

    &__link {
      @include font-style('body--l');
      padding: ($baseline * 1.2) 0 ($baseline * 1.7);
    }
  }
}

// small version
.popover--s {
  @include font-style('body--m');
  display: flex;
  justify-content: flex-start;
  position: relative;

  .icon__toggler {
    height: $spacing--s;
  }

  .icon {
    cursor: pointer;
    display: inline-block;
    position: relative;

    svg {
      fill: $color-brand--one;
    }
  }

  .popover {
    background: $color-brand--white;
    border: 1px solid $color--grey;
    max-width: 400px;
    min-width: 100px;
    position: absolute;
    text-align: left;
    top: $baseline * 2.5;
    width: auto;

    &::before {
      display: none;
    }

    .popover__dialog {
      padding: $spacing--xs 0;
    }

    .popover__dialog li a {
      @include text-ellipsis;
      display: block;
      padding: $spacing--xxs 15px;
      text-decoration: none;

      &:hover {
        background: $color--one-10;
      }
    }
  }

  &.align-center {
    justify-content: center;
    margin: 0 auto;
  }

  &.align-right {
    justify-content: flex-end;
  }
}

