/* define button design */

.button{
    display: inline-block;
    border-radius: 4px;
    padding: 10px;
    font-family: chevin-bold, sans-serif;
    transition: background-color .3s ease-in-out,
    color .3s ease-in-out;
}

.button i {
    margin-right: 5px;
}

input.button,
button.button{
    border: none;
}

.button:hover {
    cursor: pointer;
}

.button:active {
    translate: 1px 1px;
}
/** define button color schema behavior for access Open Results */
.button-closed {
    background-color: #999999;
    box-shadow: 2px 2px 5px var(--dark-blue);
}

.button-closed:active {
    background-color: #cccccc;
    color: #444444;
}

/** define button color schema behavior in dark mode */
.button.theme-dark, a.button.theme-dark {
    background-color: var(--dark-blue);
    color: var(--light-blue);
    box-shadow: 2px 2px 5px var(--dark-blue);
}

.button.theme-dark:active, a.button.theme-dark:active {
    background-color: var(--medium-blue);
    color: var(--green);
    translate: 1px 1px;
}
.button.theme-dark:hover {
    background-color: var(--medium-blue);
}

/** define button color schema behavior in light mode */
.button.theme-light, a.button.theme-light {
    background-color: white;
    color: var(--dark-blue);
    box-shadow: 2px 2px 5px var(--dark-blue);
}

.button.theme-light:active, a.button.theme-light:active {
    background-color: white;
    color: var(--medium-blue);
}

.button.theme-light:hover {
    background-color: var(--light-pink);
}

.button.trash {
    background-color: red;
    padding: 3px;
}
.button.trash svg{
    color: white;
    width: 24px;
    height: 24px;
}

.button.button-add {
    background-color: #00ae00;
    color: #84ff84;
    margin: 1em;
}
.button[type=submit] {
    margin: 1em;
}
.button.edit {
    background-color: #0023ae;
    color: #a7d7ff;
}

.button.button-add svg{
    height: 12px;
    width: 12px;
}

@media (width < 640px) {
    .button.button-add {
        margin-top:0;
        padding-left: 15px;
        padding-bottom: 0;
    }
    .button.button-add svg{
        height: 16px;
        width: 16px;
        font-weight: bold;
    }
}