@import "common/variable";

@vfalert: vf-alert;

.@{vfalert} {
  font-size: 14px;
  width: 100%;
  padding: @--alert-padding;
  margin: 0;
  border-radius: @--alert-radius;
  position: relative;
  background-color: @--color-white;
  overflow: hidden;
  opacity: 1;

  &__title {
    font-size: 14px;
  }

  &__description {
    margin-top: 10px;
    font-size: 13px;
  }

  &--info {
    &.is-light {
      background-color: @--alert-info-color;
      color: @--color-info;
    }

    &.is-dark {
      background-color: @--color-info;
      color: @--color-white;
    }
    .@{vfalert}__description {
      color: @--color-info;
    }
  }

  &--success {
    &.is-light {
      background-color: @--alert-success-color;
      color: @--color-success;

      .@{vfalert}__description {
        color: @--color-success;
      }
    }

    &.is-dark {
      background-color: @--color-success;
      color: @--color-white;
    }
  }

  &--warning {
    &.is-light {
      background-color: @--alert-warning-color;
      color: @--color-warning;

      .@{vfalert}__description {
        color: @--color-warning;
      }
    }

    &.is-dark {
      background-color: @--color-warning;
      color: @--color-white;
    }
  }

  &--error {
    &.is-light {
      background-color: @--alert-danger-color;
      color: @--color-danger;

      .@{vfalert}__description {
        color: @--color-danger;
      }
    }

    &.is-dark {
      background-color: @--color-danger;
      color: @--color-white;
    }
  }
}