/*
 * The only styling the plugin adds. Everything else comes from the theme's
 * UIkit classes.
 *
 * UIkit's alert padding is sized for a block of text in the page flow; the top
 * bar is a one-line band above the header and needs to be slimmer. The
 * horizontal padding stays untouched: the right side reserves room for the
 * close button.
 */
.janser-alerts-topbar .uk-alert {
    padding-top: 8px;
    padding-bottom: 8px;
}

/*
 * UIkit pins the close button 20px below the top edge, which is the middle of
 * an alert with its own padding. In the slim bar that is below centre (measured
 * at 21px from the top of a 47px band) and gets worse the shorter the notice is,
 * so the button is centred instead.
 */
.janser-alerts-topbar .uk-alert-close {
    top: 50%;
    transform: translateY(-50%);
}

/*
 * The theme hands an alert's colour down to its title through the element
 * selector `.uk-alert h1,…,.uk-alert h6`, so the bar's title — a span, because
 * a notice on every page must not enter every page's heading outline — would
 * stay in the default heading colour while the rest of the box is green,
 * orange or red. This is the one rule that makes the bar look like the
 * YOOtheme alert element with an inline title; the typography comes from
 * `uk-h3`, which reproduces the `h3` that element renders a title as.
 */
.janser-alerts-topbar .el-title {
    color: inherit;
}