:host {
	display: none;
	opacity: 0;
	
    transition: display 0.3s, opacity 0.3s;
    transition-behavior: allow-discrete;
	
	@staring-style {
		opacity: 1;
	}
}

:host([visible]) {
    display: block;
    opacity: 1;
	
	@starting-style {
		opacity: 0;
	}
}

div {
    display: flex;
    align-items: center;
    column-gap: 1.5em;
    row-gap: 0.25em;

    flex-wrap: wrap;

    --color: var(--c-dark);
    --bg: var(--c-light);

    background-color: var(--bg);
    border-radius: calc(var(--radius) / 4);
    color: var(--color);
    padding: 0.1em 0.5em;
}

p {
    margin: 0;
}

infobar-buttons {
    flex: 1 0 0;
    
    display: flex;
    justify-content: right;
    flex-wrap: wrap;

    column-gap: 0.5em;
    row-gap: 0.25em;
}

infobar-buttons > * {
    flex: 0 0 auto;
}