/***************************************************************************/
/* Copyright Jens Edlund 2022                                              */
/* Shadow DOM style for Språkbanken Tal's                                  */
/* Logo web component                              */
 /**************************************************************************/

/* Versioning */
:host {
 --version: 'v1.0.0';
 --name:    'sbtal-logo';
 --prefix:  'log';
}

/* 
These are the (easily) configurable settings.
They variables actually used have no prefix, and live in the 
Shadow DOM and its host. The defaults are set here, and can be overridden by 
setting global CSS variables with the same names with a --a-logo- or -o-logo- 
prefix, or by setting the private variables after loading the CSS in the 
HTML template
*/
:host {
 /* Variable naming
  a-logo-img-width (atom-logo-img-l-width) 
 */
 --width:       var(--a-lgo-width,       100px);
 --height:      var(--a-lgo-height,      100px);
 --font:        var(--a-lgo-font,        12pt Arial);
 --color:       var(--a-lgo-color,       red);
 /* Mainly for debugging */
 --img-border:  var(--a-lgo-img-border,  none); 
 --cap-border:  var(--a-lgo-cap-border,  none);
 --fig-border:  var(--a-lgo-fig-border,  none);
 --logo-border: var(--a-lgo-logo-border, none);
}
:host {
 padding: 0;
 margin: 0;
 /* Default variable settings. These should be overridden to
  suit the specific logo ! */
 /* NB! As it is now, these could be overridden by styling
 the host element directly in the light DOM. We could 
 encapsulate completely by embedding a single extra div 
 that gets styled using the variables, but there is no real
 need. */
 height: var(--height); 
 width:  var(--width);
 font:   var(--font);
 color:  var(--color);
 /* debugging */
 border: var(--logo-border);
}
::slotted(img) {
	padding: 0;
	margin: 0;
	max-width: 100%;
	height: auto;
 /* debugging */
	border: var(--img-border);
}
figure {
	padding: 0;
	margin: 0;
/*	height: 100%; 
	width: 100%; */
 /* debugging */
	border: var(--fig-border);
}
figcaption {
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: center;
 /* debugging */
	border: var(--cap-border);
}