// ----
// libsass (v3.5.0.beta.2)
// ----


// COLOR VARIABLES
$success: #3ADB76;
$alert: #FF3B30;
$warning: #FF9500;
$info: #5AC8FA;

$body-font-color: #474250;
$black-30: rgba(0, 0, 0, 0.30);
$black-45: rgba(0, 0, 0, 0.45);
$white-45: rgba(255, 255, 255, 0.45);
$white-65: rgba(255, 255, 255, 0.65);
$white: #fff;
$success: #3ADB76;
$secondary: #666E7C;
// $alert: #FF3B30;
// $warning: #FF9500;





// MIXINS:
@mixin global-transition(
  $property: all,
  $delay: 0,
  $duration: 0.2s,
  $function: linear,
  $direction: null
) {
  animation-direction: $direction;
  transition-delay: $delay;
  transition-duration: $duration;
  transition-property: $property;
  transition-timing-function: $function;
}



// ALERT-BOX COLORS
$flashes: (success $success),
          (alert $alert),
          (warning $warning),
          (info $info);

@function set-flash-text-color($color: nth($status, 1)) {
  @if (lightness($color) > 60) {
    @return $body-font-color; // Lighter background, return dark color
  } @else {
    @return $white; // Darker background, return light color
  }
}
@function set-flash-close-button($color: nth($status, 1)) {
  @if (lightness($color) > 50) {
    @return $black-30; // Lighter background, return dark color
  } @else {
    @return $white-65; // Darker background, return light color
  }
}

@function set-flash-close-button-hover($color: nth($status, 1)) {
  @if (lightness($color) > 50) {
    @return $black-45; // Lighter background, return dark color
  } @else {
    @return $white-45; // Darker background, return light color
  }
}

@each $status in $flashes {
  $flash-close-btn: set-flash-close-button(nth($status, 2));
  $flash-close-btn-hover: set-flash-close-button-hover(nth($status, 2));

  .Flash--#{nth($status, 1)} {
    background: nth($status, 2);
    color: set-flash-text-color(nth($status, 2));
    .Close {
      @include global-transition;
      color: $flash-close-btn;
      &:hover,
      &:active,
      &:focus {
        color: $flash-close-btn-hover;
      }
    }
  }
}


.Flash {
  display: block;
  font-family: "Helvetica", sans-serif;
  padding: 1rem;
  line-height: 1.6;
  position: relative;
}
.Close {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  margin: 0.3rem 0.75rem;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0.5rem;
}
.wrapper {
  margin: 0.5rem;
}