@import '../../partials/variables';
@import '../../partials/colors';

.messages {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  margin: 5px 0 20px 0;

  color: var(--font-color);

  &__item {
    width: 80%;

    position: relative;
    padding: 20px 15px;
    margin: 5px 0;

    background-color: $transparant-blue;

    @media (max-width: $mobile-breakpoint) {
      width: 90%;
    }

    &--error {
      background-color: $transparant-red;
    }

    &--warning {
      background-color: $transparant-orange;
    }

    &--success {
      background-color: $transparant-green;
    }

    & i {
      position: absolute;
      top: 15px;
      right: 15px;
    }
  }

  &--fixed {
    position: fixed;
    top: 0;
  }

  &--fixed &__item {
    background-color: $blue;
  }

  &--fixed &__item--error {
    background-color: $red;
  }

  &--fixed &__item--warning {
    background-color: $orange;
  }

  &--fixed &__item--success {
    background-color: $green;
  }
}
