.storagemanager-header {
	display: flex;
	gap: 1.5rem;
	& > span {
		min-width: 0;
		overflow: hidden;
		margin-right: auto;
	}
}

.storagemanager-section {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	& > .storagemanager-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.5rem;
	}

	& > .storagemanager-detail {
		padding-left: 1rem;
		opacity: 0.8;
	}
}

.storagemanager-bar {
	position: relative;
	height: 1.25rem;
	background-color: var(--color-c);
	display: flex;
	align-items: center;
	justify-content: center;

	& > .storagemanager-bar-fill {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background-color: var(--color-d);
		min-width: 0;
	}

	& > span {
		position: relative;
		font-size: 0.85em;
	}
}

.storagemanager-actions {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;

	& > .storagemanager-armed {
		background-color: oklch(0.48 0.085 102);
		@media (hover: hover) {
			&:hover {
				background-color: oklch(0.53 0.085 102);
			}
		}
	}

	& > .storagemanager-error {
		color: rgb(255, 24, 24);
		flex-basis: 100%;
	}
}
