.notification, .flash-message{
   display: flex;
   border-radius: 2px;
   margin: 10px 0;
   align-items: center;
   padding: 5px;
   width: 100%;

   &:before{
       font-family: 'Font Awesome 5 Free';
       font-weight: 900;
       font-size: 25px;
       margin: 0 15px;
       text-align: center;
       width: 30px;
   }

   &--error{
       color: $red;
       background: $lightred;
       border-color: $red;

       &.dark-theme{
           color: $lightred;
           background: $red;
           border-color: $red;
        }

       &:before{
           content: '\f071';
       }
   }

   &--warning{
       color: color('yellow', 7);
       background: $lightyellow;
       border-color: color('yellow', 7);

       &.dark-theme{
           color: $lightyellow;
           background: color('yellow', 6);
           border-color: color('yellow', 6);
        }

       &:before{
           content: '\f06a';
       }
   }

   &--success{
       color: $green;
       background: $lightgreen;
       border-color: $green;

        &.dark-theme{
           color: $lightgreen;
           background: $green;
           border-color: $green;
        }

       &:before{
           content: '\f058';
       }
   }

   &--notice{
       color: $blue;
       background: $lightblue;
       border-color: $blue;

       &.dark-theme{
           color: $lightblue;
           background: $blue;
           border-color: $blue;
        }

       &:before{
           content: '\f12a';
       }
   }
}

.notification{
   border: 1px solid;

   &__text--container{
       margin: 10px 0;
   }

   &__text{
       margin: 0;
   }
}

.flash-message{
  position: relative;
  transition: .5s opacity;

  &__close{
     position: absolute;
     top: 50%;
     right: 10px;
     transform: translateY(-50%);
     cursor: pointer;
  }
}

.closing{
  opacity: 0;
}

.closed{
  display: none;
}