@reference "../../../../../styles/globals.css";

.docSearchWrapper {
  @apply sticky -top-3 z-[11] mb-3 flex w-full flex-wrap items-center justify-between gap-y-1 pr-3;
}
.listContainer {
  height: calc(100% - 3.25rem);
  @apply box-border pb-[30px];
}
.cardWrapper {
  @apply grid min-w-[902px] grid-cols-3 gap-4 last:mb-[30px];
}
.segWrapper {
  @apply box-border flex h-[180px] w-full flex-col rounded-xl border border-transparent bg-gray-50 px-4 pt-4 hover:cursor-pointer hover:border-gray-200 hover:bg-white hover:shadow-lg xl:min-w-[290px];
}
.segTitleWrapper {
  @apply flex items-center justify-between;
}
.segStatusWrapper {
  @apply box-border flex items-center;
}
.segContent {
  white-space: wrap;
  @apply mt-2 h-0 min-h-0 flex-1 overflow-hidden from-gray-800 to-white text-sm text-ellipsis text-gray-800;
}
.segData {
  @apply hidden pt-2 text-xs text-gray-500;
}
.segDataText {
  @apply max-w-[80px] truncate;
}
.chartLinkText {
  background: linear-gradient(to left, white, 90%, transparent);
  @apply absolute right-0 hidden h-12 items-center pl-12 text-xs font-semibold text-primary-600;
}
.segModalContent {
  @apply h-96 overflow-y-scroll text-base break-all text-gray-800;
  white-space: pre-line;
}
.footer {
  @apply mt-4 box-border flex flex-wrap items-center justify-between gap-y-2 border-t-[0.5px] border-t-gray-200 pt-3;
}
.numberInfo {
  @apply text-xs font-medium text-gray-500;
}
.keywordTitle {
  @apply mt-1 mb-2 text-xs text-gray-500 uppercase;
}
.keywordWrapper {
  @apply flex max-h-[200px] w-full flex-wrap overflow-auto text-gray-700;
}
.keyword {
  @apply mr-1 mb-2 max-h-[100px] max-w-[200px] overflow-y-auto rounded-lg border border-gray-200 px-2 py-1 text-sm whitespace-pre-line last:mr-0;
}
.hashText {
  @apply inline-block w-48 truncate;
}
.commonIcon {
  @apply mr-1 inline-block h-3 w-3 bg-gray-500 align-middle;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
}
.targetIcon {
  mask-image: url(../../assets/target.svg);
}
.typeSquareIcon {
  mask-image: url(../../assets/typeSquare.svg);
}
.bezierCurveIcon {
  mask-image: url(../../assets/bezierCurve.svg);
}
.cardLoadingWrapper {
  @apply relative inline-block h-full w-full rounded-b-xl;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}
.cardLoadingIcon {
  background-image: url(../../assets/cardLoading.svg);
}
/* .hitLoadingIcon {
  background-image: url(../../assets/hitLoading.svg);
} */
.cardLoadingBg {
  @apply relative mt-4 h-full rounded-b-xl;
  left: calc(-1rem - 1px);
  width: calc(100% + 2rem + 2px);
  height: calc(100% - 1rem + 1px);
  background: linear-gradient(180deg, rgba(252, 252, 253, 0) 0%, #fcfcfd 74.15%);
}

.hitTitleWrapper {
  @apply mb-2 flex w-full items-center justify-between;
}
.progressWrapper {
  @apply flex w-full items-center justify-between;
}
.progress {
  border-radius: 3px;
  @apply relative mr-2 box-border h-1.5 flex-1 border border-gray-300;
}
.progressLoading {
  @apply border-[#EAECF0] bg-[#EAECF0];
}
.progressInner {
  @apply absolute top-0 h-full bg-gray-300;
}
.progressText {
  font-size: 13px;
  @apply font-bold text-gray-700;
}
.progressTextLoading {
  border-radius: 5px;
  @apply h-3.5 w-3.5 bg-[#EAECF0];
}
.editTip {
  box-shadow:
    0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

.delModal {
  background:
    linear-gradient(180deg, rgba(217, 45, 32, 0.05) 0%, rgba(217, 45, 32, 0) 24.02%), #f9fafb;
  box-shadow:
    0px 20px 24px -4px rgba(16, 24, 40, 0.08),
    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  @apply rounded-2xl p-8;
}
.warningWrapper {
  box-shadow:
    0px 20px 24px -4px rgba(16, 24, 40, 0.08),
    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  background: rgba(255, 255, 255, 0.9);
  @apply mb-3 flex h-12 w-12 items-center justify-center rounded-xl border-[0.5px] border-gray-100;
}
.warningIcon {
  @apply h-[22px] w-[22px] fill-current text-red-600;
}