@import '../styles/variables.css';

.alert {
	composes: default-text from '../styles.css';
  	composes: default-font from '../styles.css';
    composes: primary-gray-border from '../styles.css';
    composes: rounded from '../styles.css';
    composes: pad-2 from '../styles.css';
    composes: bg-body from '../styles.css';
    border-left: 5px solid var(--info);
    display: flex;
    white-space: pre-wrap;
    align-items: center;
}

.success {
    border-left-color: var(--success);
}

.warning {
    border-left-color: var(--warning);
}

.danger {
    border-left-color: var(--error);
}

.close {
    composes: bold from '../styles.css';
    composes: bg-transparent from '../styles.css';
    composes: pad-0 from '../styles.css';
    composes: cursor-pointer from '../styles.css';
    composes: border-none from '../styles.css';
    display: inline-block;
    font-size: 2.2rem;
    opacity: .2;
    filter: alpha(opacity=20);
    margin-left: auto;
    -webkit-appearance:none;
}

.close:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}

.hidden {
    display: none;
}