calcite-block-section.scss

:host {
  @apply box-border
    bg-foreground-1
    text-color-2
    text-n1
    block;
}

:host([open]) {
  @apply border-solid
    border-0
    border-b-color-3
    border-b;
}

:host(:last-child) {
  @apply border-b-0;
}

.toggle {
  @apply bg-transparent
    border-0
    text-color-2
    font-sans
    font-medium
    w-full;
}

.toggle--switch,
.section-header {
  @apply items-center
    cursor-pointer
    flex
    mx-0
    my-1
    px-0
    py-2
    select-none
    text-n1
    focus-base;

  &:focus {
    @apply focus-outset;
  }
  &:hover {
    @apply text-color-1;
  }
}

.section-header .status-icon {
  @apply self-end;
}

.section-header__text {
  @apply flex-auto
    mx-3
    my-0;

  text-align: initial;
  word-wrap: anywhere;
}

.toggle--switch {
  calcite-switch {
    @apply pointer-events-none;
    margin-inline-start: theme("margin.1");
  }
  .status-icon {
    margin-inline-start: theme("margin.2");
  }
}

.toggle--switch__content {
  @apply flex items-center flex-auto;
}

.status-icon.valid {
  color: theme("colors.success");
}

.status-icon.invalid {
  color: theme("colors.danger");
}