@geoffcox/sterling-svelte-themes/css/sterling/Callout.base.css

A modern theme for the sterling-svelte component library.

.sterling-callout-portal {
  position: relative;
  overflow: visible;
}

.sterling-callout {
  background-color: var(--stsv-common__background-color);
  border-color: var(--stsv-common__border-color);
  border-radius: 0;
  border-style: solid;
  border-width: var(--stsv-common__border-width);
  box-sizing: border-box;
  color: var(--stsv-common__color);
  display: none;
  filter: var(--stsv-common__drop-shadow);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: auto;
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  width: max-content;
  z-index: 0;
}

.sterling-callout.open {
  display: grid;
}

.sterling-callout .arrow {
  position: absolute;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: inherit;
  border-color: inherit;
  border-style: inherit;
  border-width: inherit;
  /* This clip path clips 1/2 the square to create a triangle */
  /* The -100% and 200% allow for the drop-shadow to not be clipped */
  clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
}

.sterling-callout.top-start .arrow,
.sterling-callout.top .arrow,
.sterling-callout.top-end .arrow {
  filter: var(--stsv-common__drop-shadow);
}

.sterling-callout.left-start .arrow,
.sterling-callout.left .arrow,
.sterling-callout.left-end .arrow {
  filter: var(--stsv-common__drop-shadow);
}

.sterling-callout .callout-text {
  padding: 1em;
}