<!-- Welcome to this simple scss maps example -->
<!-- The goal of this pen is to use scss maps to define different alert styles -->
<!-- Author: <nicolacastellanidev@gmail.com> -->
<button onclick="showAlert()">Show default alert</button>
<button onclick="showAlert('alert-info')">Show info alert</button>
<button onclick="showAlert('alert-warning')">Show warning alert</button>
<button onclick="showAlert('alert-error')">Show error alert</button>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

* {
  font-family: "Poppins", sans-serif;
}

// colors palette using scss maps
// @see https://sass-lang.com/documentation/values/maps
$colors: (
  "primary": #ed4c67,
  "on-primary": #ffc312,
  "background": #1D1D22,
  "on-background": #ffffff
);

// maps of maps, used to define different alert type properties
$alerts: (
  "default": (
    "backgroundColor": #12cbc4,
    "titleColor": #833471,
    "messageColor": #4a4a4a
  ),
  "info": (
    "backgroundColor": #7ed6df,
    "titleColor": #30336b,
    "messageColor": #4a4a4a
  ),
  "warning": (
    "backgroundColor": #f0932b,
    "titleColor": #2c2c54,
    "messageColor": #4a4a4a
  ),
  "error": (
    "backgroundColor": #ee5253,
    "titleColor": #ff9f43,
    "messageColor": #4a4a4a
  )
);

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: map-get($colors, on-background);
    background-color: map-get($colors, background);

    display: flex;
    place-content: center;
    place-items: center;

    button {
      padding: 1rem 2rem;
      font-size: 1rem;
      border-radius: 50px;
      border: none;
      outline: none;
      text-transform: uppercase;
      background-color: map-get($colors, primary);
      color: map-get($colors, on-primary);
      font-weight: bold;
      cursor: pointer;

      & + button {
        margin-left: 1rem;
      }
      
      @media screen and (max-width: 800px) {
        font-size: .75rem;
        padding: .5rem 1rem;
      }
    }

    .alert {
      position: fixed;
      top: 3rem;
      left: 3rem;
      padding: 1rem;
      border-radius: 5px;
      border: .25rem solid map-get($colors, on-background);
      background-color: map-get(map-get($alerts, default), backgroundColor);
      
      // set the default properties for alert parts
      &-title {
        color: map-get(map-get($alerts, default), titleColor);
        font-weight: bold;
      }

      &-message {
        color: map-get(map-get($alerts, default), messageColor);
        font-weight: light;
      }

      &-close {
        position: absolute;
        top: -.25rem;
        right: -2.5rem;
        width: 1rem;
        height: 1rem;
        border: .25rem solid map-get(map-get($alerts, default), backgroundColor);
        border-radius: 5px;
        background-color: map-get($colors, on-background);
        background-image: url("https://image.flaticon.com/icons/svg/1828/1828774.svg");
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
      }
      
      // then specify the properties for eact alert type, using map-keys to get the alert class and properties
      @each $alertType in map-keys($alerts) {
        &-#{$alertType} {
          background-color: map-get(
            map-get($alerts, $alertType),
            backgroundColor
          );
          
          .alert-title {
            color: map-get(map-get($alerts, $alertType), titleColor);
            font-weight: bold;
          }

          .alert-message {
            color: map-get(map-get($alerts, $alertType), messageColor);
            font-weight: light;
          }

          .alert-close {
            border-color: map-get(
              map-get($alerts, $alertType),
              backgroundColor
            );
          }
        }
      }
    }
  }
}

/**
* Alert styling using SCSS Maps
* created by nicolacastellanidev@gmail.com
* feel free to use it
*/

let alertCount = 0;

const removeAlert = (id) => {
  document.body.removeChild(document.getElementById(id));
}

const generateAlert = (
  className = 'alert-default',
  title = 'A cool alert mate!',
  message = 'Lorem ipsum dolor sit amet?'
) => {
  const alert = document.createElement('div');
  const alertId = `alert-${alertCount++}`;
  
  alert.id = alertId;
  alert.classList = ['alert', ...className.split(' ')].join(' ');
  alert.innerHTML = `
      <div class="alert-title">
        ${title}
      </div>
      <div class="alert-message">
        ${message}
      </div>
      <div class="alert-close" onclick="removeAlert('${alertId}')"></div>
  `.trim();
  return alert;
}

const showAlert = (className = 'alert-default') => {
  document.body.appendChild(generateAlert(className, prompt("Set the alert title", 'A cool alert mate!'), prompt("Set the alert message", 'Lorem ipsum dolor sit amet?')));
}