@use 'colours';
@use 'responsive';
@use 'layout';

@mixin -messages($color, $background-color) {
  align-items: center;
  background-color: colours.$white;
  border: 1px solid $background-color;
  border-radius: colours.$border-radius;
  display: flex;
  margin: layout.$spacing-height 0 0;

  & > .icon {
    background-color: $background-color;
    color: $color;
  }

  @include responsive.respond-to(very-small) {
    overflow: scroll;
  }
}

.error {
  @include -messages(colours.$white, colours.$error);
}

.warning {
  @include -messages(colours.$off-black, colours.$yellow);
}

.info {
  @include -messages(colours.$off-white, colours.$blue);
}

.success {
  @include -messages(colours.$off-white, colours.$blue);
}

.messages {
  flex-grow: 1;
  list-style: none;
}

.icon {
  align-items: center;
  align-self: stretch;
  display: flex;
  font-size: 2em;
  justify-content: center;
  padding: 0.5rem;
  width: 10%;

  & > svg {
    margin: 0;
  }
}

.message {
  margin: 0.5em 1em;
}

.dismiss {
  align-self: start;
  margin: 0.5em;
}
