/**
 * Notification
 * @define notification
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;
$notification: null !default;

.ecl-notification {
  border: map.get($notification, 'border-width') solid transparent;
  border-radius: map.get($notification, 'radius');
  box-sizing: border-box;
  color: map.get($notification, 'color');
  display: flex;
  font: map.get($notification, 'font');
  margin: 0;
  padding-bottom: map.get($notification, 'padding-mobile');
  padding-inline-start: map.get($notification, 'padding-start-mobile');
  padding-inline-end: map.get($notification, 'padding-end-mobile');
  padding-top: map.get($notification, 'padding-mobile');
  position: relative;
}

.ecl-notification__icon {
  flex-shrink: 0;
  margin-inline-end: var(--s-xs);
}

.ecl-notification__content {
  display: grid;
  grid-template-columns: auto max-content;
  width: 100%;
}

.ecl-notification__title {
  font: map.get($notification, 'title-font');
  font-weight: map.get($notification, 'title-font-weight');
  grid-column-start: 1;
  margin-bottom: map.get($notification, 'title-spacing');
  max-width: var(--max-w);
}

.ecl-notification__description {
  grid-column-start: 1;
  margin: 0;
  max-width: var(--max-w);
}

.ecl-notification__link {
  grid-column-start: 1;
}

.ecl-notification__close {
  align-self: self-start;
  color: map.get($notification, 'close-color');
  font: var(--f-m);
  grid-column-start: 2;
  grid-row-end: span 2;
  grid-row-start: 1;
  margin-inline-end: map.get($notification, 'close-offset-end');
  margin-top: map.get($notification, 'close-offset-top');

  .no-js & {
    display: none;
  }
}

/* stylelint-disable-next-line order/order */
@include breakpoints.up('m') {
  .ecl-notification {
    padding-bottom: map.get($notification, 'padding');
    padding-inline-end: map.get($notification, 'padding-end');
    padding-inline-start: map.get($notification, 'padding-start');
    padding-top: map.get($notification, 'padding');
  }

  .ecl-notification__icon {
    margin-inline-end: var(--s-m);
  }

  .ecl-notification__description {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

// information
.ecl-notification--info {
  background: map.get($notification, 'info', 'background');
  border-color: map.get($notification, 'info', 'border-color');
  border-inline-start: 4px solid map.get($notification, 'info', 'color');

  .ecl-notification__icon {
    fill: map.get($notification, 'info', 'color');
  }
}

// success
.ecl-notification--success {
  background: map.get($notification, 'success', 'background');
  border-color: map.get($notification, 'success', 'border-color');
  border-inline-start: 4px solid map.get($notification, 'success', 'color');

  .ecl-notification__icon {
    fill: map.get($notification, 'success', 'color');
  }
}

// warning
.ecl-notification--warning {
  background: map.get($notification, 'warning', 'background');
  border-color: map.get($notification, 'warning', 'border-color');
  border-inline-start: 4px solid map.get($notification, 'warning', 'color');

  .ecl-notification__icon {
    fill: map.get($notification, 'warning', 'color');
    position: relative;
    z-index: 2;
  }

  .ecl-notification__icon-background {
    background: map.get($notification, 'warning', 'icon-background-color');
    height: map.get($notification, 'warning', 'icon-background-height');
    left: map.get($notification, 'warning', 'icon-background-left-mobile');
    position: absolute;
    width: map.get($notification, 'warning', 'icon-background-width');
    top: map.get($notification, 'warning', 'icon-background-top-mobile');
    z-index: 1;

    &:dir(rtl) {
      left: auto;
      right: map.get($notification, 'warning', 'icon-background-left-mobile');
    }
  }
}

@include breakpoints.up('m') {
  .ecl-notification--warning .ecl-notification__icon-background {
    left: map.get($notification, 'warning', 'icon-background-left');
    top: map.get($notification, 'warning', 'icon-background-top');

    &:dir(rtl) {
      left: auto;
      right: map.get($notification, 'warning', 'icon-background-left');
    }
  }
}

// error
.ecl-notification--error {
  background: map.get($notification, 'error', 'background');
  border-color: map.get($notification, 'error', 'border-color');
  border-inline-start: 4px solid map.get($notification, 'error', 'color');

  .ecl-notification__icon {
    fill: map.get($notification, 'error', 'color');
  }
}
