calcite-tip.scss

:host {
  @apply relative
    flex
    flex-row
    m-4
    border
    border-solid
    border-color-2
    box-border
    bg-foreground-1
    text-color-2
    text--1h;

  * {
    @apply box-border;
  }
}

.container {
  @apply p-4 w-full;
}

:host([dismissed]),
:host([dismissed]) .container {
  @apply hidden;
}

:host([selected]) .container {
  @apply border-none m-0 p-0;
}

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

.header {
  @apply mb-2;
}
.header .heading {
  @apply text-color-1 p-0;
}

.container[hidden] {
  @apply hidden;
}

.content {
  @apply flex;
}

.info {
  @apply py-0 px-4;
  width: 70%;
  &:only-child {
    @apply w-full px-0;
  }
}

::slotted(p) {
  @apply mt-0;
}

::slotted(a) {
  @apply focus-base;
  color: theme("backgroundColor.brand");
}

::slotted(a:focus) {
  @apply focus-outset;
}

.image-frame {
  width: theme("width.1/4");
  img {
    @apply max-w-full;
  }
}

::slotted(img) {
  @apply max-w-full;
}