calcite-block.scss

:host {
  @extend %component-host;
  @extend %component-spacing;

  @apply flex
    flex-grow-0
    flex-shrink-0
    flex-col
    p-0
    transition-margin
    duration-150
    ease-cubic
    border-0
    border-b
    border-color-3
    border-solid;
  flex-basis: auto;
}

@import "../../assets/styles/header";

.header {
  @apply justify-start p-0;
}

.header,
.toggle {
  grid-area: header;
}

.header-container {
  @apply grid items-stretch;
  grid-template: auto / auto 1fr auto auto;
  grid-template-areas: "handle header control menu";
  grid-column: header-start / menu-end;
  grid-row: 1 / 2;

  & > .header {
    @apply py-3 px-0;
  }
}

.toggle {
  @apply flex
    flex-nowrap
    justify-between
    font-inherit
    items-center
    m-0
    py-3
    px-0
    border-none
    cursor-pointer
    focus-base;
  text-align: initial;

  background-color: transparent;
  &:hover {
    @apply bg-foreground-2;
  }
  &:focus {
    @apply focus-inset;
  }
}

calcite-loader[inline] {
  grid-area: control;
  @apply self-center;
}

calcite-handle {
  grid-area: handle;
}

.title {
  @apply m-0;
  padding-inline: 0.75rem;
  padding-block: 0px;
}

.header .title .heading {
  @apply p-0
    text--1
    text-color-2
    font-medium
    word-break
    leading-tight
    transition-color
    duration-150
    ease-in-out;
}

.summary {
  @apply p-0
    text--2
    text-color-3
    mt-0.5
    word-break;
}

.icon {
  margin-inline-start: 0.75rem;
  margin-inline-end: 0px;
}

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

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

.status-icon.loading {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.toggle-icon {
  @apply self-center
  text-color-3
  transition-color
  duration-150
  ease-in-out;
  margin-inline-end: 1rem;
  margin-inline-start: 0px;
}

.toggle:hover .toggle-icon {
  @apply text-color-1;
}

.content {
  @apply px-3
    py-2
    relative
    animate-in;
}

.control-container {
  @apply flex m-0;
  grid-area: control;
}

calcite-action-menu {
  grid-area: menu;
}

:host([open]) {
  @apply my-2;

  .header .title .heading {
    @apply text-color-1;
  }
}

:host([disabled]) {
  pointer-events: none;
  user-select: none;

  @apply pointer-events-none select-none;

  .header-container {
    @apply opacity-50;
  }
}