$popover-bg: $light !default;
$popover-box-shadow: $box-shadow-sm;

.popover {
  box-shadow: $popover-box-shadow;
  background: $popover-bg;
  border-radius: $border-radius;
  display: flex;
  flex-direction: column;

  .popover__section {
    padding: $spacing-md;
  }

  .popover__action-list {
    padding: $spacing-xs 0;
    display: flex;
    flex-direction: column;

    .popover__action-list__item {
      .action-list__item__content {
        display: flex;
        align-items: center;
      }

      .suka-icon.popover__icon {
        margin-right: $spacing-md;
      }

      button {
        cursor: pointer;
        position: relative;
        border: none;
        width: 100%;
        -webkit-appearance: none;
        padding: $spacing-xs $spacing-md;
        outline: none;
        background: none;

        &:hover {
          background: $light-gray-2;
        }

        &:active {
          background: $light-gray-1;
        }

        &:focus::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 3px;
          background: $primary;
        }
      }

      &.action-list__item--destructive {
        button {
          color: $danger;

          &:hover {
            background: rgba($danger, .1);
          }

          &:active {
            background: rgba($danger, .2);
          }

          &:focus::after {
            background: $danger;
          }
        }
      }
    }
  }
}