.popover-content {
  border: 1px solid $grey-blue;
  box-shadow: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
  margin-right: -$radius;
  margin-top: -1px;
  border-radius: $radius;
  padding: 0.5em 1em;
  width: 200px;
  z-index: $z-popover;
}

.popover-actions {
  margin: 1rem -1rem -0.5rem -1rem;
  border-top: 1px solid $grey-lighter;
  display: flex;

  .popover-action {
    border: none;
    background: transparent;
    height: 2.75em;
    width: 100%;
    margin: 4px;
    border-radius: $radius;
    font-size: 1rem;
    font-weight: $weight-bold;
    align-items: center;
    cursor: pointer;

    &:hover {
      background: $white-ter;
    }

    &:focus {
      background: $white-ter;
      box-shadow: inset 0 0 0 2px rgba($blue, 0.5);
      outline: none;
    }

    @each $name, $pair in $colors {
      $color: nth($pair, 1);

      &.is-#{$name} {
        color: $color;
      }
    }

    // Override is-primary, which is normally green, to be blue
    &.is-primary {
      color: $blue;
    }
  }
}