/*------------------------------------------------------------
ALERTS
====================================*/

/* Variables Custom */
$alert-icon-padding-x:              1.5rem !default;
$alert-font-size:                   1.4rem !default;

$alert-danger-icon:                 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15.557' height='15.556' viewBox='0 0 15.557 15.556'%3E%3Cpath fill='#{$danger}' d='M7.778,9.192,1.414,15.557,0,14.142,6.364,7.778,0,1.414,1.414,0,7.778,6.364,14.142,0l1.415,1.414L9.192,7.778l6.364,6.364-1.415,1.415Z'/%3E%3C/svg%3E%0A") !default;
$alert-danger-icon-width:           2.2rem !default;
$alert-danger-icon-height:          2.2rem !default;

$alert-success-icon:                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{$success}' d='M6.345,11.034,0,4.69,1.287,3.4,6.345,8.368,14.713,0,16,1.287Z' transform='translate(0 2)'/%3E%3C/svg%3E%0A") !default;
$alert-success-icon-width:          2.8rem !default;
$alert-success-icon-height:         2.8rem !default;

$alert-warning-icon:                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.801' height='21.211' viewBox='0 0 4.801 21.211'%3E%3Cpath fill='#{$warning}' d='M20.758,23.875a2.236,2.236,0,0,1-.691-1.664,2.188,2.188,0,0,1,.691-1.65A2.417,2.417,0,0,1,22.5,19.9a2.323,2.323,0,0,1,1.694.661,2.208,2.208,0,0,1,.676,1.65,2.257,2.257,0,0,1-.676,1.664,2.3,2.3,0,0,1-1.694.676A2.388,2.388,0,0,1,20.758,23.875ZM20.278,3.34h4.44l-.75,14.041H21Z' transform='translate(-20.067 -3.34)'/%3E%3C/svg%3E") !default;
$alert-warning-icon-width:          2rem !default;
$alert-warning-icon-height:         2.2rem !default;

$alert-info-icon:                   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.8' height='23.16' viewBox='0 0 4.8 23.16'%3E%3Cpath fill='#{$info}' d='M12.835,6.995a2.107,2.107,0,0,1-.69-1.605,2.107,2.107,0,0,1,.69-1.6,2.407,2.407,0,0,1,1.71-.645,2.472,2.472,0,0,1,1.709.615A1.98,1.98,0,0,1,16.945,5.3a2.258,2.258,0,0,1-.675,1.665,2.338,2.338,0,0,1-1.725.675A2.407,2.407,0,0,1,12.835,6.995Zm-.18,3.285H16.4V26.3H12.655Z' transform='translate(-12.145 -3.14)'/%3E%3C/svg%3E") !default;
$alert-info-icon-width:             2rem !default;
$alert-info-icon-height:            2.2rem !default;
/***************************************/

/* Notif */
.alert {
  position: relative;
  border-width: 0 0 $alert-border-width 0;
  text-align: center;
  font-size: $alert-font-size;
  font-weight: $font-weight-sbold;

  // Icon
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: $alert-icon-padding-x;
    top: 50%;
    transform: translateY(-50%);
    background: {
      repeat: no-repeat;
      size: contain;
      position: center;
    };
  }

  p {
    margin-bottom: 0;
  }
}
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(rgba($value, 0.05), $value, $value);

    &:before {
      @if($color=='danger') {
        width: $alert-danger-icon-width;
        height: $alert-danger-icon-height;
        background-image: str_replace($alert-danger-icon, "#", "%23");
      } @else if($color=='success') {
        width: $alert-success-icon-width;
        height: $alert-success-icon-height;
        background-image: str_replace($alert-success-icon, "#", "%23");
      } @else if($color=='warning') {
        width: $alert-warning-icon-width;
        height: $alert-warning-icon-height;
        background-image: str_replace($alert-warning-icon, "#", "%23");
      } @else if($color=='info') {
        width: $alert-info-icon-width;
        height: $alert-info-icon-height;
        background-image: str_replace($alert-info-icon, "#", "%23");
      }
    }
  }
}

// Marge sous menu
.menu-container + .sylius-flash-message {
  .alert {
    &:last-child {
      margin-bottom: 3rem;
    }
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(lg) {
  // Marge sous menu
  .menu-container + .sylius-flash-message {
    .alert {
      &:first-child {
        margin-top: -2.5rem;
      }
      &:last-child {
        margin-bottom: 4rem;
      }
    }
  }
}
