/// ----------------------------------------------------------------------

/// Alert

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'corners';
@use 'colours';
@use 'animations';
@use 'transitions';
@use 'movement';
@use 'shadows';
@use 'states';
@use 'z-index';

/// -------------------
/// Alert config
/// -------------------

$padding-x: spacing.$md !default;
$padding-y: spacing.$md !default;
$close-size: 1.5rem !default;

/// -------------------
/// Alert selectors
/// -------------------

.alert {
  position: relative;
  box-sizing: border-box;
  max-width: 800px;
  background-color: white;
  box-shadow: shadows.$one;
  border-radius: corners.$base;
  z-index: z-index.$alert;
  border: 2px solid;

  &--info {
    border-color: colours.$state-info;
    background-color: colours.$state-info--alt;
    color: colours.$state-info;

    > .header {
      color: colours.$state-info;
    }
  }

  &--success {
    border-color: colours.$state-success;
    background-color: colours.$state-success--alt;
    color: colours.$state-success;

    > .header {
      color: colours.$state-success;
    }
  }

  &--warning {
    border-color: colours.$state-warning;
    background-color: colours.$state-warning--alt;
    color: colours.$state-warning;

    > .header {
      color: colours.$state-warning;
    }
  }

  &--error {
    border-color: colours.$state-error;
    background-color: colours.$state-error--alt;
    color: colours.$state-error;

    > .header {
      color: colours.$state-error;
    }
  }
}

/// -------------------
/// Alert close button
/// -------------------

.alert__close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: z-index.$alert;
}

/// -------------------
/// Alert icon
/// -------------------

.alert__icn {
  position: absolute;
  left: $padding-x;
  top: $padding-y + 0.25rem;
}

/// -------------------
/// Alert header
/// -------------------

.alert__header.header {
  padding: $padding-y $padding-x;
  padding-bottom: 0;
  border-bottom: 0;

  > h2.text {
    margin-bottom: 0;
  }
}

/// -------------------
/// Alert body
/// -------------------

.alert__body {
  padding-left: $padding-x;
  padding-right: $padding-x * 3;
  padding-top: $padding-y;
  padding-bottom: $padding-y;
}

/// -------------------
/// Alert footer
/// -------------------

.alert__footer.footer {
  border-top: 0;
  background-color: transparent;
}
