/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													  6.00/00 - 03-10-23
/* layout	-> leistungen - tagcloud                                              */
/* file 	-> design/tagcloud.css	                                              */
/* loading  -> leistungen.def.php                                                 */
/* switch   -> menu-item                                                          */
/* link     -> https://codepen.io/alvaromontoro/pen/mdrpLzj                       */
/* update   -> 31-12-2020                                                         */
/* ------------------------------------------------------------------------------ */
/* TAGCLOUD */
ul.tagcloud {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    margin:0 auto;
    padding:.4em;
    align-items:center;
    justify-content:center;
    line-height: 2.2rem;
    list-style:none;
    border: 0px solid orange;
}
/* ------------------------------------------------------------------------------ */
/*                                                                6.00/00 - 03-10-23
/* ------------------------------------------------------------------------------ */
ul.tagcloud a {
    --size: 4;
    --min-font-size: .8rem;
    --max-font-size: 1.8rem;
    --color: var(--color-primary);
    color: var(--color); 
    position:relative;
    display:block;
    padding: 0.125rem 0.25rem;
    font-size: clamp(var(--min-font-size), calc(var(--size) * 0.2rem + 0.5rem), var(--max-font-size));
    text-decoration: none;
    cursor: pointer !important;
    opacity: calc((15 - (9 - var(--size))) / 15); 
}
/* OLD ORIGINAL */
/* not supported by any browser at the moment :( --size: attr(data-weight number); */
/* opacity for different tones of a single color */
/*
ul.tagcloud a {
    --size: 4;
    --color:var(--color-primary);
    color: var(--color);
    font-size: calc(var(--size) * 0.2rem + 0.5rem);
    display: block;
    padding: 0.125rem 0.25rem;
    position: relative;
    text-decoration: none;
    opacity: calc((15 - (9 - var(--size))) / 15); 
}
*/
ul.tagcloud a[data-weight="1"] { --size: 2; }
ul.tagcloud a[data-weight="2"] { --size: 3; }
ul.tagcloud a[data-weight="3"] { --size: 4; }
ul.tagcloud a[data-weight="4"] { --size: 5; }
ul.tagcloud a[data-weight="5"] { --size: 6; }
ul.tagcloud a[data-weight="6"] { --size: 8; }
ul.tagcloud a[data-weight="7"] { --size: 10; }
ul.tagcloud a[data-weight="8"] { --size: 12; }
ul.tagcloud a[data-weight="9"] { --size: 14; }

ul[data-show-value] a::after { content: " (" attr(data-weight) ")"; font-size:1rem;}

ul.tagcloud li:nth-child(2n+1) a { --color:var(--tag-col-1);}
ul.tagcloud li:nth-child(3n+1) a { --color:var(--tag-col-2); }
ul.tagcloud li:nth-child(4n+1) a { --color:var(--tag-col-3); }
ul.tagcloud li:nth-child(5n+1) a { --color:var(--tag-col-4); }

ul.tagcloud a:focus {outline:1px dashed;}

ul.tagcloud a::before {
    content:'';
    position:absolute;
    top:0;
    left:50%;
    width:0;
    height:100%;
    background: var(--color);
    transform: translate(-50%, 0);
    opacity:.15;
    transition: width .25s;
}

ul.tagcloud a:focus::before,
ul.tagcloud a:hover::before {width:100%;}

@media (prefers-reduced-motion) {ul.tagcloud * {transition: none !important;}}


@media screen and (max-width: 1280px) {
    ul.tagcloud a {
      font-size: calc(var(--size) * 0.12rem + 0.4rem);
    }
  }


/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */