

.pf-c-alert {
  // component variables
  --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--light-100);

  // Icon
  --pf-c-alert__icon--Padding: var(--pf-global--spacer--md);
  --pf-c-alert__icon__svg--MarginTop: var(--pf-global--spacer--xs);

  // Body
  --pf-c-alert__body--Padding: var(--pf-global--spacer--md);

  // Title
  --pf-c-alert__title--FontSize: var(--pf-global--FontSize--md);
  --pf-c-alert__title--MarginTop: var(--pf-global--spacer--xs);
  --pf-c-alert__title--MarginBottom: var(--pf-global--spacer--xs);

  // Action
  --pf-c-alert__action--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-alert__action--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-alert__action--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-alert__action--PaddingLeft: var(--pf-global--spacer--lg);

  // Success
  --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--200);
  --pf-c-alert--m-success__icon--BackgroundColor: var(--pf-global--success-color--100);
  --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);

  // Danger
  --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--300);
  --pf-c-alert--m-danger__icon--BackgroundColor: var(--pf-global--danger-color--100);
  --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);

  // Warning
  --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--200);
  --pf-c-alert--m-warning__icon--BackgroundColor: var(--pf-global--warning-color--100);
  --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);

  // Info
  --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--200);
  --pf-c-alert--m-info__icon--BackgroundColor: var(--pf-global--info-color--100);
  --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);

  // This component always needs to be light
  @extend %pf-t-light;

  display: flex;
  background-color: var(--pf-c-alert--BackgroundColor);
  box-shadow: var(--pf-c-alert--BoxShadow);


  &.pf-m-success {
    .pf-c-alert__icon {
      color: var(--pf-c-alert--m-success__icon--Color);
      background-color: var(--pf-c-alert--m-success__icon--BackgroundColor);
    }

    .pf-c-alert__title {
      color: var(--pf-c-alert--m-success__title--Color);
    }
  }

  &.pf-m-danger {
    .pf-c-alert__icon {
      color: var(--pf-c-alert--m-danger__icon--Color);
      background-color: var(--pf-c-alert--m-danger__icon--BackgroundColor);
    }

    .pf-c-alert__title {
      color: var(--pf-c-alert--m-danger__title--Color);
    }
  }

  &.pf-m-warning {
    .pf-c-alert__icon {
      color: var(--pf-c-alert--m-warning__icon--Color);
      background-color: var(--pf-c-alert--m-warning__icon--BackgroundColor);
    }

    .pf-c-alert__title {
      color: var(--pf-c-alert--m-warning__title--Color);
    }
  }

  &.pf-m-info {
    .pf-c-alert__icon {
      color: var(--pf-c-alert--m-info__icon--Color);
      background-color: var(--pf-c-alert--m-info__icon--BackgroundColor);
    }

    .pf-c-alert__title {
      color: var(--pf-c-alert--m-info__title--Color);
    }
  }
}

.pf-c-alert__icon {
  display: flex;
  padding: var(--pf-c-alert__icon--Padding);
  font-size: 24px; // this is here until we land on a fixed way to set sizes for icons

  svg { // b/c the svg is generated it must break BEM and not receive a class.
    margin-top: var(--pf-c-alert__icon__svg--MarginTop);
  }
}

.pf-c-alert__body {
  flex: 1 1 100%;
  padding: var(--pf-c-alert__body--Padding);
}

.pf-c-alert__title {
  margin-top: var(--pf-c-alert__title--MarginTop);
  margin-bottom: var(--pf-c-alert__title--MarginBottom);
  font-size: var(--pf-c-alert__title--FontSize);
}

.pf-c-alert__action {
  padding: var(--pf-c-alert__action--PaddingTop) var(--pf-c-alert__action--PaddingRight) var(--pf-c-alert__action--PaddingBottom) var(--pf-c-alert__action--PaddingLeft);
  white-space: nowrap;
}
