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

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

/* 
These are the (easily) configurable settings.
They local variables actually in the style sheet 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 qualified with a --a-lsw- 
prefix, or by setting the private variables after loading the CSS in the 
HTML template.
*/
:host {
 /* Variable naming
  gloa-lsw-PROPERTY  
 */
 /* Styling */
 --width        : var(--a-lsw-width,        10em);
 --height       : var(--a-lsw-height,       2.2em);
 --padding      : var(--a-lsw-padding       0.5em);
 --background   : var(--a-lsw-background,   transparent);
 --border       : var(--a-lsw-border,       1pt solid red);
 --cursor       : var(--a-lsw-cursor,       pointer);
}

/* 
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.
*/

/* Hide the language button that is unused and keep the rest */
/* Note that this should be done programatically, which would 
   allow us to use an arbitrary random set of languages. Best
   would probably be to make developers list the languages in 
   question in the template though, to maintain some control. */
:lang(sv).lang_sv, :lang(en).lang_en {
}
:lang(sv).lang_en, :lang(en).lang_sv {
	display: none;
/* This could be done as a listing as well, by not hiding but 
   changing the current language to something different, with 
   e.g. no cursor (or something saner)
  color: blue;
  cursor: none;
*/
}

/* Default styling of the buttons. Note that this can be tweaked
using CSS variables, or it can be overridden entirely using an 
explicit style in the element's template */
.lang-tgl {
  width            : var(--width);
  height           : var(--height);
  padding          : var(--padding); 
  cursor           : var(--cursor);
  border           : var(--border);
  background       : var(--background);
}