alert.element.scss

@import './../styles/tokens/generated/index';
@import './../styles/mixins/mixins';

$lightweight-alert-line-height: $cds-global-typography-body-line-height;

:host {
  --container-padding: #{$cds-global-space-2} 0;
  --min-height: #{$cds-global-space-9};
  --color: #{$cds-global-typography-color-400};
  --font-size: #{$cds-global-typography-secondary-font-size};
  --font-weight: #{$cds-global-typography-secondary-font-weight};
  --letter-spacing: #{$cds-global-typography-body-letter-spacing};
  --icon-size: #{$cds-global-space-8};
  --icon-color: var(--color);
  width: 100%;
}

.private-host {
  min-height: var(--min-height);
  color: var(--color);
}

:host([_type='default']) ::slotted(cds-alert-actions),
:host([_type='banner']) ::slotted(cds-alert-actions) {
  --action-size: calc(var(--min-height) - #{$cds-global-space-4});
  white-space: nowrap;
  display: block;
}

:host([_type='banner']) {
  --icon-size: #{$cds-global-space-9};
}

.alert-status-icon,
::slotted(cds-icon) {
  @include equilateral(var(--icon-size));
  --color: var(--icon-color);
}

cds-internal-close-button {
  --color: inherit;
}

.alert-content-wrapper,
.alert-icon-wrapper {
  display: flex;
  min-height: #{$cds-global-space-6};
  padding: var(--container-padding);
}

.alert-icon-wrapper {
  min-width: var(--icon-size);
}

// default is for lightweight alerts
.alert-content-wrapper {
  @include vertical-center-content;
  transform: translateY(#{$cds-global-space-1});
}

.alert-content-wrapper {
  color: var(--color);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  line-height: $lightweight-alert-line-height;
}

::slotted(cds-alert-actions) {
  --action-text-color: var(--color);
  --action-size: #{$lightweight-alert-line-height};
  display: none;
}

:host([_type='default']) cds-internal-close-button {
  height: #{$cds-global-space-8};
}

:host([_type='default']) .alert-content-wrapper {
  align-items: self-start;
}

:host([_type='light'][status='info']) {
  --icon-color: #{$cds-alias-status-info};
}

:host([_type='light'][status='success']) {
  --icon-color: #{$cds-alias-status-success};
}

:host([_type='light'][status='warning']) {
  --icon-color: #{$cds-alias-status-warning-dark};
}

:host([_type='light'][status='danger']) {
  --icon-color: #{$cds-alias-status-danger};
}

:host([status='loading'][_type='default']) .alert-spinner {
  --ring-color: #{$cds-alias-object-opacity-200};
}

:host([status='loading'][_type='banner']) .alert-spinner {
  --ring-color: #{$cds-alias-object-opacity-200};
  --fill-color: var(--icon-color);
}

:host([size='sm']:not([_type='banner'])) {
  --font-size: #{$cds-global-typography-font-size-1};
  --letter-spacing: normal;
}

// banner styles
:host([_type='banner']) .alert-content-wrapper {
  transform: none;
  min-height: #{$cds-global-space-10};
}

:host([_type='banner']) {
  --color: #{$cds-global-typography-color-100};
}

:host([_type='default'][status='warning']),
:host([_type='banner'][status='warning']) {
  --color: #{$cds-global-color-construction-900};

  cds-alert-actions {
    --action-hover-text-color: var(--color);
    --action-text-color: var(--color);
  }
}

:host([_type='banner']) .spinner {
  @include min-equilateral(calc(#{$cds-global-space-8} + #{$cds-global-space-2}));
  margin-top: #{$cds-global-space-2};
}

:host([_type='banner']) cds-internal-close-button {
  height: $cds-global-space-9;
  margin-top: $cds-global-space-3;
}

@supports (-moz-appearance: none) and (text-emphasis: none) {
  // nudge for alert text content firefox
  :host(:not([_type='banner']):not([size='sm'])) .alert-content {
    transform: translateY(calc(-1 * #{$cds-global-space-2}));
  }
}