calcite-notice.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-notice-width: the width of the notice
 */

// scale variables
:host([scale="s"]) {
  --calcite-notice-spacing-token-small: theme("spacing.2");
  --calcite-notice-spacing-token-large: theme("spacing.3");
  @include slotted("title", "*", ".container") {
    @apply text--1-wrap my-0.5;
  }
  @include slotted("message", "*", ".container") {
    @apply text--2-wrap my-0.5;
  }
  ::slotted(calcite-link) {
    @apply text--2-wrap my-0.5;
  }
  .notice-close {
    // specific padding for close button to align with calcite-action small-scale spacing
    @apply p-2;
  }
}

:host([scale="m"]) {
  --calcite-notice-spacing-token-small: theme("spacing.3");
  --calcite-notice-spacing-token-large: theme("spacing.4");
  @include slotted("title", "*", ".container") {
    @apply text-0-wrap my-0.5;
  }
  @include slotted("message", "*", ".container") {
    @apply text--1-wrap my-0.5;
  }
  ::slotted(calcite-link) {
    @apply text--1-wrap my-0.5;
  }
}

:host([scale="l"]) {
  --calcite-notice-spacing-token-small: theme("spacing.4");
  --calcite-notice-spacing-token-large: theme("spacing.5");
  @include slotted("title", "*", ".container") {
    @apply text-1-wrap my-0.5;
  }
  @include slotted("message", "*", ".container") {
    @apply text-0-wrap my-0.5;
  }
  ::slotted(calcite-link) {
    @apply text-0-wrap my-0.5;
  }
}

:host([width="auto"]) {
  --calcite-notice-width: theme("width.auto");
}

:host([width="half"]) {
  --calcite-notice-width: theme("width.1/2");
}

:host([width="full"]) {
  --calcite-notice-width: theme("width.full");
}

:host {
  @apply hidden mx-auto max-w-full items-center;
  width: var(--calcite-notice-width);
}

.container {
  @apply hidden
    my-0
    box-border
    w-full
    opacity-0
    pointer-events-none
    bg-foreground-1;
  max-height: 0;
  text-align: start;
  transition: $transition;
  border-inline-start: 0px solid;
  box-shadow: 0 0 0 0 transparent;
}

// focus styles
.notice-close {
  @apply focus-base;
  &:focus {
    @apply focus-inset;
  }
}

:host {
  @apply flex;
}

:host([active]) .container {
  @apply flex
    shadow-1
    items-center
    opacity-100
    max-h-full
    border-2
    pointer-events-auto;
}

@include slotted("title", "*", ".container") {
  @apply m-0 font-medium text-color-1;
}

@include slotted("message", "*", ".container") {
  @apply inline m-0 font-normal text-color-2;
  margin-inline-end: var(--calcite-notice-spacing-token-small);
}

@mixin notice-element-base() {
  @apply box-border;
  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
  flex: 0 0 auto;
  transition: all 0.15s ease-in-out;
}

.notice-content {
  @include notice-element-base;
  @apply flex flex-col min-w-0 break-words;
  flex: 1 1 0;
  padding-block: var(--calcite-notice-spacing-token-small);
  padding-inline: 0 var(--calcite-notice-spacing-token-small);

  &:first-of-type:not(:only-child) {
    padding-inline-start: var(--calcite-notice-spacing-token-large);
  }
  &:only-of-type {
    padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
  }
}

.notice-icon {
  @apply flex items-center;
  @include notice-element-base;
}

.notice-close {
  @apply flex items-center self-stretch bg-transparent border-none outline-none cursor-pointer text-color-3;
  @include notice-element-base;
  -webkit-appearance: none;

  &:hover,
  &:focus {
    @apply bg-foreground-2 text-color-1;
  }

  &:active {
    @apply bg-foreground-3;
  }
}

.actions-end {
  @apply flex self-stretch;
}

$noticeColors: "blue" var(--calcite-ui-brand), "red" var(--calcite-ui-danger), "yellow" var(--calcite-ui-warning),
  "green" var(--calcite-ui-success);

@each $noticeColor in $noticeColors {
  $name: nth($noticeColor, 1);
  $color: nth($noticeColor, 2);

  :host([color="#{$name}"]) .container {
    border-color: $color;
    & .notice-icon {
      color: $color;
    }
  }
}