/*
	This is the main style sheet for the phone
	see for details: https://vaadin.com/docs/latest/styling/custom-theme/creating-custom-theme/#theme-folder-structure
*/

@import url("./lumo/padding.css");
@import url("./lumo/margin.css");
@import url("./lumo/shadow.css");
@import url("./lumo/spacing.css");
@import url("./lumo/typography.css");
@import url("./lumo/icon-size.css");
@import url("./lumo/border-radius.css");

@import url("./components/card.css");
@import url("./components/vaadin-text-area.css");
@import url("./components/vaadin-app-layout.css");

.div-card {
	background-color: var(--lumo-base-color);
	border-radius: var(--lumo-border-radius);
	box-shadow: var(--lumo-box-shadow-xs);
	padding: var(--lumo-space-s);
	display: inline-block;
}

.div-inline {
	display: inline;
}

.layout-topline {
	border-top: 1px solid var(--lumo-contrast-10pct);
}

:host(.test) [part="input-field"]::after {
	border-style: none;
	border-width: 0px;
	border-color: white;
	background-color: red !important;
}
/*
	badges: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
*/
.badgeContainer {
	position: relative;
}

.badge-error {
	position: absolute;
	font-size: var(--lumo-font-size-xxs);
	font-family: var(--lumo-font-family);
	text-align: center;
	padding: 0.1em;
	border-radius: 50%;
	min-width: 1.2em;
	background: var(--lumo-error-color);
	left: 100%;
	top: -2.2em;
	color: white;
}

.badge-success {
	position: absolute;
	font-size: var(--lumo-font-size-xxs);
	font-family: var(--lumo-font-family);
	text-align: center;
	padding: 0.1em;
	border-radius: 50%;
	min-width: 1.2em;
	background: var(--lumo-success-color);
	left: 100%;
	top: -2.2em;
	color: white;
}

/* 
*  responsive square
*  https://spin.atomicobject.com/2015/07/14/css-responsive-square/
*/

.pinButton {
	color: var(--lumo-primary-text-color);
	font-size: var(--lumo-font-size-xl);
	font-family: var(--lumo-font-family);
	text-align: center;
	vertical-align: bottom;
	border-radius: var(--lumo-border-radius-m);
	background: var(--lumo-contrast-5pct);
	padding-top: 5%;
}

.pinButton:after {
  content: "";
  display: block;
  padding-bottom: 15%;
}


/*
 * Vaadin 23 -> Vaadin 24 changes
 * ---------------------------------------- 
 * App Layout
 *     https://vaadin.com/docs/latest/upgrading#update-your-component-styling
 *     The background of the drawer and navbar are now defined in the parts themselves, instead of in ::before pseudo-elements:
 *
 *
 */
vaadin-app-layout::part(navbar) 
{
    min-height: 0;
}