// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #ec223f;

$title-color:       rgba(255, 255, 255, 0.7);
$updated-at-color:  rgba(255, 255, 255, 0.5);

$meter-background:  darken($background-color, 15%);

// ----------------------------------------------------------------------------
// Widget-meter styles
// ----------------------------------------------------------------------------
.widget-usage-gauge {

  background-color: $background-color;

	.title {
		color: $title-color;
	}

	.value {
		font-weight: 600;
		font-size: 30px
	}

	.gauge {
		width: 100px;
		height: 180px;
		display: block;
		margin: 0 auto 10px;
		position: relative;
	}

	.gauge-meter, .gauge::after {
		display: block;
		background: url("/assets/usage-gauge-background.png") repeat-y center bottom;
	}

	.gauge::after {
		content: "";
		height: 100%;
		opacity: 0.15;
	}

	.gauge-meter {
		width: 100px;
		position: absolute;
		bottom: 0;
		opacity: 0.6;
	}

	.updated-at {
		color: $updated-at-color
	}
}