.ResourceList {
  --x-resource-list-border-style: solid;
  --x-resource-list-border-color: var(--x-default-color-border, transparent);
  display: flex;
  flex-direction: column;

  & > * + * {
    margin-block-start: var(
      --x-resource-list-block-spacing,
      var(--x-spacing-base)
    );
  }
}

.spacingNone {
  --x-resource-list-block-spacing: 0;
}

.spacingExtraTight {
  --x-resource-list-block-spacing: var(--x-spacing-tight4x);
}

.spacingTight {
  --x-resource-list-block-spacing: var(--x-spacing-tight1x);
}

.spacingBase {
  --x-resource-list-block-spacing: var(--x-spacing-base);
}

.spacingLoose {
  --x-resource-list-block-spacing: var(--x-spacing-loose1x);
}

.spacingExtraLoose {
  --x-resource-list-block-spacing: var(--x-spacing-loose4x);
}

.borderStyleDotted {
  --x-resource-list-border-style: dotted;
}

.borderColorEmphasized {
  --x-resource-list-border-color: var(
    --x-default-color-border-emphasized,
    var(--x-default-color-border, transparent)
  );
}

.borderInner {
  &.spacingNone {
    & > * {
      &:not(:first-child) {
        border-block-start-width: 0;
      }
    }
  }

  & > *:not(.ResourceListHeader) {
    border-block: 1px var(--x-resource-list-border-style)
      var(--x-resource-list-border-color);

    &:first-child {
      border-block-start-width: 0;
    }

    &:last-child {
      border-block-end-width: 0;
    }
  }
}

.borderOuter {
  &.spacingNone {
    & > * {
      &:not(:last-child) {
        border-block-end-width: 0;
      }
    }
  }

  & > *:not(.ResourceListHeader) {
    border-block: 1px var(--x-resource-list-border-style)
      var(--x-resource-list-border-color);
  }
}

.borderFull {
  border-radius: var(--x-global-border-radius);

  & > * {
    border: 1px var(--x-resource-list-border-style)
      var(--x-resource-list-border-color);

    &:first-child {
      border-top-left-radius: var(--x-global-border-radius);
      border-top-right-radius: var(--x-global-border-radius);
    }

    &:last-child {
      border-bottom-left-radius: var(--x-global-border-radius);
      border-bottom-right-radius: var(--x-global-border-radius);
    }
  }

  &.spacingNone > *:not(:last-child) {
    border-block-end: 0;
  }
}

.ResourceListHeader {
  display: flex;
  align-items: center;
  width: 100%;

  @nest .borderInner > & {
    border-block-start-width: 0;
  }
}

.ResourceListHeader-isHidden {
  border: 0;
  margin-block-start: 0;

  & + * {
    margin-block-start: 0;
  }

  @nest .borderInner > & {
    & + * {
      border-block-start-width: 0;
    }
  }

  @nest .borderFull > & {
    & + * {
      border-top-left-radius: var(--x-global-border-radius);
      border-top-right-radius: var(--x-global-border-radius);
    }
  }
}

.ResourceListHeaderContent {
  & + .ResourceListHeaderContent {
    padding-inline-start: var(--x-spacing-base);
  }
}

.ResourceListHeaderContent-isPrimary {
  flex-grow: 1;
}