/* 
Copyright 2022 Jens Edlund
Språkbanken Tal CSS for the sbtal-thumbarticle element.
*/

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

/* 
Mobile first is not implemented within the local CSS,
but the tools are there - just set defaults of variables
based on small screen, and then exceptions for large screens.
*/

/* In the unselected state, these articles are fixed-size flexbox 
object (allthough the flex is controlled in the parent). They also 
have a relatively opaque glass design, and they contain a miniature 
image of the element plus the title.
*/

/* The :host styling creates the glassmorphism effect
on the thumbnails as well as the full-sized version.
The glassmortphism design methods are inspired by a 
number of sources, including
https://albertwalicki.com/blog/glassmorphism-how-to-create
https://codepen.io/iamsahebgiri/pen/XWjxrLv
https://blog.logrocket.com/implement-glassmorphism-css/

*/

/*

:host {
	padding-left: 10px;
	padding-right: 10px;
}
*/
/* Default CSS variables (custom properties) */
:host {
/* 
 --width:         var(--width,        200px);
 --height:        var(--width,        200px);
 */
 --background      : var(--m-tha-background,      rgba(255,255,255,0.40));
 --title-background : var(--m-tha-title-background, rgba(255,255,255,0.77));
 --backdrop-filter : var(--m-tha-backdrop-filter, blur(10px));
 --border-radius   : var(--m-tha-border-radius,   10px);
 --border-width    : var(--m-tha-border-width,    1px);
 --border-style    : var(--m-tha-border-style,    solid);
 --border-color    : var(--m-tha-border-color,    rgba(255,255,255,0.25));
 --box-shadow      : var(--m-tha-box-shadow,      0 0 10px 1px rgba(0, 0, 0, 0.5)); 
  --scale          : var(--m-tha-scale,           0.4);
  --color          : var(--m-tha-color,           rgb(0,0,0));
  --filter         : var(--m-tha-filter,          grayscale(100%) contrast(300%) invert(100%));
  --opacity        : var(--m-tha-opacity,         0.5);

}
:host(.-thumb) {
/* This is likely external stuff - but do we need it for transitions?
 width             : var(--width);
 height            : var(--height); */
 background        : var(--background);
 backdrop-filter   : var(--backdrop-filter);
 border-radius     : var(--border-radius);
 border-width      : var(--border-width);
 border-style      : var(--border-style);
 border-color      : var(--border-color);
 box-shadow        : var(--box-shadow);
 padding           : 0;
 cursor            : pointer !important;
 /* Some sites us a gradient here, but I can't 
 really see theimprovement. Maybe if blacks and/or 
 greys where part of it, but we'll keep it simple 
 now
 background-image: linear-gradient(110deg, rgba(255,255,255, 0.2), rgba(255,255,255, 0.6), rgba(255,255,255, 0.4));
 */
 /* This is preset and shouldn't be changed - 
 it's part of the thumbnail design */
 overflow          : hidden;
}
:host(.-highlit) {
 background        : white;
}
/* The next layer of the thumbnails - the content */
::slotted(.-thumb:not(:first-child)) {
 /* Positioning and scaling */
 float             : left;
 width             : calc((100%/var(--scale)));
 transform         : scale(var(--scale));
 transform-origin  : 0 0;
 z-index           : 1;
 /* thumb styling */
 color             : var(--color);
 filter            : var(--filter);
 opacity           : var(--opacity);
}
::slotted(.-highlit:not(:first-child)) {
 color             : initial;
 filter            : initial;
 opacity           : 1;
}
/*
::slotted(:not(:first-child)) {
 color             : initial;
 width             : 90%                        !important;
 padding-left      : 5%                         !important;
 background        : white                      !important;
 filter            : initial;
 opacity           : 1                          !important;
 transform         : initial;
 transform-origin  : initial;
}
*/
/* Styling of thumbnailed title */
::slotted(.-thumb:first-child) {
 /* Positioning */
 position          : fixed; /* or absolute */
 top               : 50%;
 left              : 50%;
 transform         : translate(-50%, -70%); /* should be 50/50, not sure why that goes wrong) */
 z-index: 2;			
 /* Thumb styling */
 background        : var(--title-background);
 border-radius     : var(--border-radius);
 border-width      : var(--border-width);
 border-style      : var(--border-style);
 border-color      : var(--border-color);
}
/* Styling of highlighted thumbnailed title */
::slotted(.-highlit:first-child) {
 background        : rgba(0,0,0,0.3);
 color             : white;
}

/* Meta-data display */
.version::after { content: var(--version); }
.prefix::after  { content: var(--prefix); }
.name::after    { content: var(--name); }