/* ==================================
   #ALERT
   ================================== */

/* Variables
   ========================================================================== */

$au-alert-font-size: var(--au-h6) !default;
$au-alert-color: var(--au-gray-900) !default;
$au-alert-background-color: var(--au-gray-200) !default;
$au-alert-success-background-color: var(--au-green-200) !default;
$au-alert-warning-background-color: var(--au-orange-200) !default;
$au-alert-error-background-color: var(--au-red-200) !default;
$au-alert-border-color: var(--au-gray-300) !default;
$au-alert-success-border-color: var(--au-green-300) !default;
$au-alert-warning-border-color: var(--au-orange-300) !default;
$au-alert-error-border-color: var(--au-red-300) !default;
$au-alert-success-icon-background-color: var(--au-green-500) !default;
$au-alert-warning-icon-background-color: var(--au-orange-500) !default;
$au-alert-error-icon-background-color: var(--au-red-600) !default;
$au-alert-success-icon-color: var(--au-white) !default;
$au-alert-warning-icon-color: var(--au-white) !default;
$au-alert-error-icon-color: var(--au-white) !default;
$au-alert-icon-size: 2rem !default;
$au-alert-small-icon-size: 1.5rem !default;
$au-alert-radius: var(--au-radius) !default;

/* Component
  ========================================================================== */

.au-c-alert {
  color: $au-alert-color;
  display: flex;
  font-family: var(--au-font);
  font-size: $au-alert-font-size;
  padding: $au-unit;
  margin-bottom: $au-unit;
  background-color: $au-alert-background-color;
  border-radius: $au-alert-radius;
  border: 0.1rem solid $au-alert-border-color;

  > :last-child {
    margin-bottom: 0;
  }

  .au-c-link {
    flex-shrink: 0;
  }
}

.au-c-alert__icon {
  background-color: var(--au-white);
  border-radius: $au-unit-large;
  height: $au-unit-large - 0.1rem; // compensate for visual distortion of perfect circle
  width: $au-unit-large;
  margin-right: $au-unit-large * 0.5;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  .au-c-icon {
    height: $au-alert-icon-size - 0.1rem; // compensate for visual distortion of perfect circle
    width: $au-alert-icon-size;
    bottom: 0;
  }
}

.au-c-alert__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.au-c-alert__title {
  font-weight: var(--au-medium);
}

.au-c-alert__close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  padding: 0;
  height: $au-unit;
  width: $au-unit;
  text-align: center;
  color: var(--au-gray-700);
  transition: color var(--au-transition);

  &:hover,
  &:focus {
    color: var(--au-gray-600);
  }
}

/* Modifiers
  ========================================================================== */

.au-c-alert--tiny {
  padding: $au-unit-small;

  .au-c-alert__icon {
    display: none;
  }
}

.au-c-alert--small {
  padding: $au-unit-small;

  .au-c-alert__icon {
    height: $au-unit - 0.1rem; // compensate for visual distortion of perfect circle
    width: $au-unit;
    margin-right: $au-unit * 0.5;
  }

  .au-c-icon {
    height: $au-alert-small-icon-size - 0.1rem; // compensate for visual distortion of perfect circle
    width: $au-alert-small-icon-size;
  }
}

.au-c-alert--success {
  background-color: $au-alert-success-background-color;
  border-color: $au-alert-success-border-color;

  .au-c-alert__icon {
    background-color: $au-alert-success-icon-background-color;

    .au-c-icon {
      fill: $au-alert-success-icon-color;
    }
  }
}

.au-c-alert--warning {
  background-color: $au-alert-warning-background-color;
  border-color: $au-alert-warning-border-color;

  .au-c-alert__icon {
    background-color: $au-alert-warning-icon-background-color;

    .au-c-icon {
      fill: $au-alert-warning-icon-color;
    }
  }
}

.au-c-alert--error {
  background-color: $au-alert-error-background-color;
  border-color: $au-alert-error-border-color;

  .au-c-alert__icon {
    background-color: $au-alert-error-icon-background-color;

    .au-c-icon {
      fill: $au-alert-error-icon-color;
    }
  }
}