[data-fs-alert] {
  // --------------------------------------------------------
  // Design Tokens for Alert
  // --------------------------------------------------------

  // Default properties
  --fs-alert-height                    : var(--fs-spacing-7);
  --fs-alert-padding-left              : var(--fs-spacing-3);
  --fs-alert-padding-right             : var(--fs-alert-padding-left);

  --fs-alert-bkg-color                 : var(--fs-color-highlighted-bkg);

  --fs-alert-text-color                : var(--fs-color-highlighted-text);
  --fs-alert-text-size                 : var(--fs-text-size-1);

  // Icon
  --fs-alert-icon-width                : var(--fs-spacing-4);
  --fs-alert-icon-height               : var(--fs-alert-icon-width);
  --fs-alert-icon-margin-right         : var(--fs-spacing-1);
  --fs-alert-icon-color                : var(--fs-alert-text-color);

  // Link
  --fs-alert-link-color                : var(--fs-alert-text-color);
  --fs-alert-link-color-visited        : var(--fs-alert-text-color);

  // Dismissible Button
  --fs-alert-button-text-color         : var(--fs-alert-text-color);
  --fs-alert-button-bkg-color          : var(--fs-alert-bkg-color);
  --fs-alert-button-border-radius      : var(--fs-border-radius);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  display: flex;
  align-items: center;
  width: 100%;
  height: var(--fs-alert-height);
  padding-right: var(--fs-alert-padding-right);
  padding-left: var(--fs-alert-padding-left);
  font-size: var(--fs-alert-text-size);
  color: var(--fs-alert-text-color);
  background-color: var(--fs-alert-bkg-color);

  > [data-fs-icon] {
    width: var(--fs-alert-icon-width);
    height: var(--fs-alert-icon-height);
    margin-right: var(--fs-alert-icon-margin-right);
    color: var(--fs-alert-icon-color);
  }

  [data-fs-alert-content] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  span {
    font-weight: var(--fs-text-weight-bold);
  }

  [data-fs-alert-link] {
    min-width: 0;
    height: var(--fs-alert-height);
    padding: 0 var(--fs-spacing-1);
    overflow: hidden;
    font-weight: var(--fs-text-weight-bold);
    line-height: var(--fs-alert-height);
    color: var(--fs-alert-link-color);
    text-overflow: ellipsis;
    white-space: nowrap;

    &:visited {
      color: var(--fs-alert-link-color-visited);
    }
  }

  [data-fs-alert-button] {
    margin-left: auto;

    [data-fs-button-wrapper] { color: var(--fs-alert-button-text-color); }

    &:hover span {
      filter: brightness(0.95);
    }
  }

  // --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------

  &[data-fs-alert-dismissible="true"] {
    padding-right: 0;
  }
}