/* stylelint-disable scss/operator-no-unspaced */
/* stylelint-enable scss/operator-no-unspaced */
/* Breakpoint viewport sizes and media queries.

Breakpoints are defined as a map of (name: minimum width), order from small to large:
   (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)

 The map defined in the `$breakpoint` global variable is used as the `$breakpoints` argument by default.

 Name of the next breakpoint, or null for the last breakpoint.

  >> breakpoint-next(sm)
   md
  >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
   md
  >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
   md
*/
/* Minimum breakpoint width. Null for the smallest (first) breakpoint.
    >> ecl-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    576px
*/
/* Maximum breakpoint width. Null for the largest (last) breakpoint.
   The maximum value is calculated as the minimum of the next one less 0.1.

   >> ecl-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
   767px
*/
/* Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
    Useful for making responsive utilities.

    >> infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    ""  (Returns a blank string)
    >> infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
    "-sm"
*/
/**
 * Message component
 * @define message
 */
.ecl-message {
  border-bottom-width: 2px;
  border-end-start-radius: 0;
  border-inline-end-width: 2px;
  border-inline-start-width: 2px;
  border-start-start-radius: 0;
  border-style: solid;
  border-top-width: 2px;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding-bottom: 1.5rem;
  -webkit-padding-end: 0.5rem;
          padding-inline-end: 0.5rem;
  -webkit-padding-start: 1.5rem;
          padding-inline-start: 1.5rem;
  padding-top: 1.5rem;
  position: relative;
}

.ecl-message__icon {
  flex-shrink: 0;
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
}

.ecl-message__content {
  width: 100%;
}

.ecl-message__title {
  color: #000;
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  font-weight: bold;
  margin-bottom: 0.75rem;
  max-width: 80ch;
}

.ecl-message__description {
  color: #404040;
  font: normal normal 400 1rem/1.5rem arial, sans-serif;
  margin: 0 0 0.5rem;
  max-width: 80ch;
  padding-bottom: 2rem;
}

.ecl-message__close {
  bottom: 0.25rem;
  color: #004494;
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  font-weight: 700;
  position: absolute;
  right: 0;
}
.no-js .ecl-message__close {
  display: none;
}

@supports (display: grid) {
  .ecl-message__content {
    display: grid;
  }
  .ecl-message__title {
    grid-column-start: 1;
  }
  .ecl-message__description {
    grid-column-start: 1;
    padding-bottom: 0;
  }
  .ecl-message__close {
    align-self: self-end;
    bottom: auto;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-row-start: 3;
    justify-self: end;
    margin-bottom: -0.75rem;
    position: relative;
    right: auto;
  }
}
/* stylelint-disable-next-line order/order */
@media (min-width: 768px) {
  .ecl-message__title {
    margin-bottom: 0.5rem;
  }
  .ecl-message__description {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .ecl-message__close {
    bottom: auto;
    top: 0.75rem;
  }
  @supports (display: grid) {
    .ecl-message__content {
      grid-template-columns: auto max-content;
    }
    .ecl-message__close {
      align-self: self-start;
      grid-column-start: 2;
      grid-row-end: span 2;
      grid-row-start: 1;
      margin-bottom: 0;
      margin-top: -0.75rem;
      position: relative;
      right: auto;
      top: auto;
    }
  }
}
.ecl-message--info {
  background: #fff;
  border-color: #006fb4;
}
.ecl-message--info .ecl-message__icon {
  fill: #006fb4;
}

.ecl-message--success {
  background: #fff;
  border-color: #467a39;
}
.ecl-message--success .ecl-message__icon {
  fill: #467a39;
}

.ecl-message--warning {
  background: #fff;
  border-color: #f29527;
}
.ecl-message--warning .ecl-message__icon {
  fill: #f29527;
}

.ecl-message--error {
  background: #fff;
  border-color: #da2131;
}
.ecl-message--error .ecl-message__icon {
  fill: #da2131;
}

ecl-button {
  grid-column-start: 2;
  grid-row-start: 1;
}

.ecl-message__icon.sc-ecl-icon-ec {
  -webkit-margin-end: 1rem;
          margin-inline-end: 1rem;
}

.ecl-message__close * {
  display: inline-flex;
  -webkit-margin-start: 0.5rem;
          margin-inline-start: 0.5rem;
}