@use "../../00-base/00-config/00-variables" as *;
@use "../../00-base/01-helpers" as *;
@use "../../01-atoms/03-lists/list--ul/list--helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Status messages
// *
////////////////////////////////////////////////////////////////////////////////

.messages--wrapper {
  position: relative;
  clear: both;

  // **  Do this not to annoy back-end devs ;)
  body.toolbar-fixed & {
    position: relative;
    @include z-index(status); // over the reset of the header, under admin bar
  }
}

$messages-icons-size: 30;

.messages {
  position: relative;
  padding: rem(15) rem(60);
  border: rem(1) solid hsl(var(--_clr-border, var(--clr-success--dark)));
  border-radius: rem(3);
  color: hsl(var(--clr-white));

  background-color: hsl(var(--_clr-bg, var(--clr-success)));
  transform: translate(0, 0);
  transition: transform .5s $easing;
  clear: both;
  margin-top: var(--gap-md);
  opacity: 1;

  @include icon((
    color: hsl(var(--clr-white)),
    size: $messages-icons-size,
  ));

  &::before {
    position: absolute;
    top: rem(12);
    bottom: 0;
    left: rem(15);
    @include square(rem(30));
    text-align: center;
    line-height: 1;
  }

  &:first-child {
    margin-top: var(--gap-md);
  }
  &:last-child {
    margin-bottom: var(--gap-md);
  }

  &.js-closing {
    opacity: 0;
    transform: translate(-100%, 0);
    transition: all .5s $easing;

    @include bp-md {
      transform: translate(0, -100%);
    }
  }

  &.js-closed {
    display: none;
  }

  a {
    filter: brightness(0.95); // darken

    &:focus-visible,
    &:hover {
      filter: brightness(1); // reset
    }
  }
}


.messages--status {
  --clr-link: var(--clr-success--dark);
  --clr-link-hover: var(--clr-success--dark);

  &::before {
    @include icon-char(circle-check);
  }
}

.messages--warning {
  --clr-link: var(--clr-warning--dark);
  --clr-link-hover: var(--clr-warning--dark);

  --_clr-bg: var(--clr-warning);
  --_clr-border: var(--clr-warning--dark);

  &::before {
    @include icon-char(triangle-exclamation);
  }
}

.messages--error {
  --clr-link: var(--clr-error--dark);
  --clr-link-hover: var(--clr-error--dark);

  --_clr-bg: var(--clr-error);
  --_clr-border: var(--clr-error--dark);

  &::before {
    @include icon-char(circle-exclamation);
  }
}

.message__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  border: none;
  color: hsl(var(--clr-white));
  background: none;
  cursor: pointer;

  &:focus-visible,
  &:hover {
    opacity: 0.6;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: rem(40);
    height: rem(40);

    @include icon((
      icon: xmark,
      color: hsl(var(--clr-white)),
    ));
  }
}

.messages__list {
  @include list-reset;

  flex-direction: column;
  gap: rem(10);
  max-width: 100%;
}

.messages__item {
  //
}
