/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

$color: #1d3557;
$color-muted: #6c757d;
$icon-size: 1rem;
$whitespace: 0.25rem;

.wp-block-xelonic-financial-ratio-block {
	background-color: #fff;
	color: $color;
	text-align: center;
	width: fit-content;
}

.wp-block-xelonic-financial-ratio-block .xe-container {
	position: relative;
}

.wp-block-xelonic-financial-ratio-block a {
	color: $color !important;
	text-decoration: none !important;
}

.wp-block-xelonic-financial-ratio-block .xe-company {
	display: block;
}

.wp-block-xelonic-financial-ratio-block .xe-title {
	font-size: 1rem;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 0.25rem;
}

.wp-block-xelonic-financial-ratio-block .xe-company .xe-ticker {
	margin-right: $whitespace;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	color: $color-muted;
}

.wp-block-xelonic-financial-ratio-block .xe-wrap-logo .xe-logo {
	max-width: 4rem;
	max-height: 4rem;
	margin-right: $whitespace;
}

.wp-block-xelonic-financial-ratio-block .xe-subtitle {
	padding-top: 0.25rem;
	color: $color-muted;
	justify-content: center;
}

.wp-block-xelonic-financial-ratio-block .xe-value {
	justify-content: center;
	padding-top: 0.25rem;
	color: #457b9d;
	font-size: 1.25rem;
	font-weight: 300;
}

.wp-block-xelonic-financial-ratio-block .xe-disabled-link {
	pointer-events: none;
}

.wp-block-xelonic-financial-ratio-block .xe-display-none {
	display: none;
}

.wp-block-xelonic-financial-ratio-block .xe-error-container {
	display: flex;
}

.wp-block-xelonic-financial-ratio-block .xe-error-container .xe-icon {
	display: flex;
	align-items: center;
}

.wp-block-xelonic-financial-ratio-block .xe-error-container .xe-message {
	margin-left: $whitespace;
}