// Messages

// Example message box // <p class=“message-yellow”><small>Warning! This is a sentence inside of a message box.</small></p>

// Example with close button // <p class=“message-yellow”><span class=“closebtn” onclick=“this.parentElement.style.display=‘none’;”>&times;</span> // <small>Warning! This is a sentence inside of a message box.</small></p>

.notice {

margin-bottom: 15px;
padding: 12px;
color: $text;
border: .1rem solid $notice;
background-color: $notice-bg;
border: .1rem solid $notice;
border-radius: .5em;
text-align: center;

@media (prefers-color-scheme: light) {
color: $light-scheme-text;
border: .1rem solid $notice-light;
background-color: $notice-bg-light;
  }

}

.message {

margin-bottom: 15px;
padding: 12px;
color: $text;
background-color: $message-default;
border: .1rem solid #00c2bb;
border-radius: .5em;
text-align: center;

@media (prefers-color-scheme: light) {
color: $light-scheme-text;
background-color: $message-light;
border: .1rem solid #d2d2d2;
  }

}

.black {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-black;
border-left: .3rem solid #595959;
border-radius: .5em;

}

.green {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-green;
border-left: .3rem solid #93d080;
border-radius: .5em;

}

.yellow {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-yellow;
border-left: .3rem solid #fdcb61;
border-radius: .5em;

}

.orange {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-orange;
border-left: .3rem solid #f9ac6b;
border-radius: .5em;

}

.red {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-red;
border-left: .3rem solid #e86c71;
border-radius: .5em;

}

.purple {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-purple;
border-left: .3rem solid #bf61c0;
border-radius: .5em;

}

.blue {

margin-bottom: 15px;
padding: 12px;
color: #fff;
background-color: $message-blue;
border-left: .3rem solid #2bc2ff;
border-radius: .5em;

}

/* The close button */ .closebtn {

margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 27px;
cursor: pointer;
transition: 0.3s;

}

/* When moving the mouse over the close button */ .closebtn:hover {

color: black;

}