:root {
  --cobalt-layout-y-spacing: theme("spacing.xs");
  --cobalt-layout-x-spacing: theme("spacing.md");
  --cobalt-layout-item-spacing: theme("spacing.sm");
  --cobalt-layout-page-header-top-spacing: theme("spacing.lg");
  --cobalt-layout-section-header-top-spacing: 40px;
}

.cobalt-layout-section,
.cobalt-layout-card,
.cobalt-layout-stack,
.cobalt-layout-page-title,
.cobalt-layout-section-title {
  min-width: calc(100% - 2 * var(--cobalt-layout-x-spacing));
  display: inline flow-root; // This is to avoid margin collapse between sections
}

.cobalt-layout--hasHeaderLink {
  @apply c-inline-flex c-flex-col c-gap-xs;
}

.cobalt-layout-header-link {
  @apply c-inline-flex c-items-center;

  a {
    @apply c-inline-flex c-gap-2xs c-no-underline c-text-body-md c-text-primary c-font-bold c-cursor-pointer hover:c-underline;
  }
}

.cobalt-layout-section {
  @apply c-bg-surface;
  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
}

.cobalt-layout-card {
  @apply c-bg-surface c-border c-border-outline c-rounded-xl;
  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);

  .cobalt-layout-card__item {
    margin: var(--cobalt-layout-item-spacing);
  }
}

div.cobalt-layout-stack {
  @apply c-bg-surface c-border c-border-outline c-rounded-xl;

  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);

  .cobalt-layout-stack__item {
    @apply c-block c-border-t c-border-t-outline;

    padding: var(--cobalt-layout-item-spacing);
  }

  .cobalt-layout-stack__item:first-child {
    @apply c-border-t-0;
  }

  a.cobalt-layout-stack__item {
    @apply [text-decoration:inherit] [font-weight:inherit];
  }

  a.cobalt-layout-stack__item[href] {
    @apply c-state-interactive c-transition-interactive;
  }

  a.cobalt-layout-stack__item[href]:first-child {
    border-radius: calc(theme("borderRadius.xl") - 1px)
      calc(theme("borderRadius.xl") - 1px) 0 0;
  }

  a.cobalt-layout-stack__item[href]:last-child {
    border-radius: 0 0 calc(theme("borderRadius.xl") - 1px)
      calc(theme("borderRadius.xl") - 1px);
  }
}

table.cobalt-layout-stack {
  @apply c-border c-border-outline c-border-separate c-rounded-xl c-border-spacing-none;
  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
  display: inline-table; // This is to avoid margin collapse between sections

  .cobalt-layout-stack__item:first-of-type th,
  tbody:not(thead ~ tbody) .cobalt-layout-stack__item:first-of-type td {
    @apply c-border-t-0;
  }

  .cobalt-layout-stack__item td,
  .cobalt-layout-stack__item th {
    @apply c-border-t c-border-t-outline;
    padding-top: var(--cobalt-layout-item-spacing);
    padding-bottom: var(--cobalt-layout-item-spacing);
  }

  .cobalt-layout-stack__item th:first-of-type,
  .cobalt-layout-stack__item td:first-of-type {
    padding-left: var(--cobalt-layout-item-spacing);
  }

  .cobalt-layout-stack__item th:last-of-type,
  .cobalt-layout-stack__item td:last-of-type {
    padding-right: var(--cobalt-layout-item-spacing);
  }
}

.cobalt-layout-section-title {
  @apply c-text-title-md;
  padding: var(--cobalt-layout-section-header-top-spacing)
    var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
    var(--cobalt-layout-x-spacing);
}

.cobalt-layout-section.cobalt-layout--isPageHeader,
.cobalt-layout-card.cobalt-layout--isPageHeader,
.cobalt-layout-stack.cobalt-layout--isPageHeader {
  padding-top: var(--cobalt-layout-page-header-top-spacing);
}