@import "./InvisibleTextStyles.css";

#button {
	display: flex;
	align-items: center;
	flex-direction: column;
	cursor: pointer;
	border-bottom: 1px solid var(--sapList_BorderColor);
	background: var(--sapList_Background);
}

#button:focus {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
}

@media (hover: hover) {
	#button:hover {
		background: var(--sapButton_Hover_Background);
	}
}

#button:active,
#button[data-ui5-growing-active="true"] {
	background: var(--sapList_Active_Background);
}

#text {
	padding: 1rem 0;
	font-size: var(--sapFontSize);
	color: var(--sapButton_TextColor);
	font-weight: bold;
}

#subtext {
	padding-bottom: 1rem;
	color: var(--sapButton_TextColor);
}