.card {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.4s ease;
  border: 1px solid var(--ag-ant-color-border-secondary);
  background-color: var(--ag-ant-color-bg-container);

  &:hover:not(.active) {
    box-shadow: var(--ag-ant-box-shadow);
    border-color: var(--ag-ant-color-primary);
  }

  &.active {
    box-shadow: 0px 4px 6px 0px var(--ag-ant-color-5);
    border: 1px solid var(--ag-ant-color-primary);
  }

  img {
    width: 40px;
    border-radius: 6px;
    border: 1px solid var(--ag-ant-color-border-secondary);
    height: 40px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--ag-ant-color-text-base);
    flex: 1;
    width: 1px;
  }

  .desc {
    font-size: 12px;
    line-height: 20px;
    color: var(--ag-ant-color-text-tertiary);
  }
}

.list-wrap {
  height: 384px;
  overflow-y: auto;
  padding: 0 24px;

  &.drawer {
    height: auto;
  }
}

.page {
  padding: 0 24px;
  justify-content: flex-end;
}

.drawer-wrap {
  :global {
    .ag-ant-drawer-body {
      padding: 0;
    }
  }
}

.modal-wrap {
  :global {
    .ag-ant-modal-body {
      padding: 0 !important;
    }
  }
}
