.configure-packs-button {
  display: inline-block;
  margin-left: 6px;
  position: relative;

  .packs-button {
    border: 1px solid #d0cccc;
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-block;
    padding: 2px 6px;
    box-shadow: 0 1px 1px 0 #abaaaa;

    &:hover  {
      background-color: #b9b9b9;
      color: white;
    }
  }

  .popover-content {
    ul {
      padding-left: 19px;
      display: flex;
      flex-direction: column;
      gap: 0.8rem 0;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &::before {
          content: '\f466';
          font-family: 'Font Awesome 5 Free';
          position: absolute;
          left: 11px;
          font-weight: 800;
          font-size: 12px;
          vertical-align: middle;
          line-height: 24px;
        }

        .pack-actions {
          overflow: hidden;
          display: flex;
          border-radius: var(--border-radius-sm);
        }

        &.disabled {
          background-color: #eeeeee;
          color: #999999;
        }
      }
    }
  }
}
