.list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.list-container {
  --padding: var(--gap-s);
  margin-top: var(--gap-m);
  padding: var(--padding);
  background-color: var(--base-50, #EFF2F6);
  border-radius: var(--border-radius-400);
}
.list-container:has(> .list-scroll-panel) {
  padding: var(--padding) 0;
}
@media (min-width: 768px) {
  .list-container {
    --padding: var(--gap-m);
  }
}

.list-scroll-panel::part(scroll-content-wrapper) {
  padding: 0 var(--padding);
}

.list-header,
.list-row {
  border: 1px solid transparent;
  border-radius: var(--border-radius-400);
}

.list-header {
  position: relative;
  display: grid;
  height: 52px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: var(--background, #FFFFFF);
  border-radius: var(--border-radius-400);
  z-index: 3;
}
@media (min-width: 1025px) {
  .list-header {
    position: sticky;
    top: calc(var(--header-height) + var(--gap-m) * 2);
  }
}

@media (min-width: 1025px) {
  .list-header::before {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    display: block;
    width: calc(100% + 2px + var(--gap-m) * 2);
    height: calc(100% + var(--gap-m) + var(--gap-s));
    background-color: var(--base-50, #EFF2F6);
    border-radius: var(--border-radius-400);
    transform: translate(-50%, -50%);
    z-index: 1;
  }
}

@media (min-width: 1025px) {
  .list-header::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px - var(--gap-m));
    left: 50%;
    display: block;
    width: calc(100% + 4px + var(--gap-m) * 2);
    height: calc(100% + var(--gap-m) + var(--gap-s));
    background-color: var(--background, #FFFFFF);
    transform: translate(-50%, -50%);
  }
}

.list-header .list-row__cell {
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: var(--font-size-s, 14px);
  font-weight: 600;
  line-height: var(--line-height-s, 1.4);
}

@media (max-width: 767px) {
  .list-header:has(.list-row__cell .list-row__select-all-checkbox:first-child) {
    padding-left: var(--gap-xs);
  }
}

.list-scroll-wrapper {
  border-radius: var(--border-radius-400);
  overflow: auto;
}

.list-row {
  transition: border-color var(--transition);
}

.list-row:has(.list-row__cell--checkbox [checked]) {
  border-color: var(--stroke-primary, var(--primary-500, #087BF7));
}

.list-row__cell {
  font-size: var(--font-size-s, 14px);
  font-weight: 400;
  line-height: var(--line-height-s, 1.4);
}