@charset "UTF-8";
/*
 * @package     Joomla.site
 * @subpackage  mod_jx_std_icons
 *
 * @copyright   Copyright (C) 2023 - 2023 thomas finnern
 * @license     GNU General Public License version 2 or later; see LICENSE.txt

css is borrowed unscrupulous from atum template-rtl.css and adjusted ;-)
*/

/*--- php-html and displayRowIcon ------------------------------------------------*/

/* standard for all */
.icon_style_row {
    /*border: 3px solid darkgrey;*/
    /*border-radius: 4px;*/
}

.jx-std-icons-outer {
    /*    background-color: #fff; */
}

/* -> row icons */
.jx-std-icons-outer .ul_row {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /**/
    grid-gap: 1rem;
}

.jx-std-icons-outer a {
    text-decoration: none;
}

.jx-std-icons-outer ul {
    padding: 0;
}

.jx-std-icons-outer .icon_li_row {
    --text-color: hsl(var(--hue), 30%, 40%);
    --bg-color: hsl(var(--hue), 60%, 97%);
    --icon-color: hsl(var(--hue), 30%, 40%);
    --bg-color-hvr: var(--template-bg-dark-90); /**/
    display: flex;
    flex-grow: 1;
    background-color: var(--bg-color); /**/
}

.jx-std-icons-outer .icon_li_row a {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0 1rem;
    color: var(--text-color);
    /* background-color: var(--bg-color); /**/
    transition: all 0.25s ease;
}

.jx-std-icons-outer .icon_li_row a .jx-std-icon-icon {
    margin-top: 0.5rem;
    margin-inline-start: 0.2rem;
}

.jx-std-icons-outer .icon_li_row a .jx-std-icon-icon > * {
    /* Icon size fallback */
    /*font-size: 2rem; */

    /* color:darkgrey; /**
    color: #0047AB; /**/
}

.jx-std-icons-outer .icon_li_row a .icon_style_name_row {
    padding: 0.125rem 0 0.6rem;

    font-weight: bold; /**/

    display: flex;
    align-items: flex-end; /**/
}

.jx-std-icons-outer .icon_li_row a .j-links-link {
    display: block;
    padding: 0 0.2rem;
    line-height: 1.1;
}

.jx-std-icons-outer .jx-std-icon-info {
    display: flex;
}

.jx-std-icons-outer .jx-std-icon-single,
.jx-std-icons-outer .icon_li_row-group {

    display: flex;
    /*  min-height: 6rem; /**/
    overflow: hidden;
    border: 1px solid hsl(var(--hue), 50%, 93%);
    border-radius: 4px;

    /* align-items: flex-end; /**/
    align-items: flex-start; /**/
    /* align-items: stretch; /**/

    /* background-color: var(--bg-color) /**/
    padding: 1px;
}

.jx-std-icons-outer .jx-std-icon-single a {
    /* align-items: flex-end; /**/
    /* align-items: flex-start; /**/
    align-items: stretch; /**/
}


.jx-std-icons-outer .icon_li_row:hover .hidden_name {
    /* visibility: visible; /**/
    display: flex;
}

.jx-std-icon-icon .icon_style_row:hover {

    transform: scale(2.5) translateY(0.45rem) translatex(0.0rem); /**/

    background-color: var(--card-bg); /**/

    border: 1px solid darkgrey;
    border-radius: 2px;

    padding: 1px;
    opacity: 1;

    z-index: 20;
}

/*.icon_li_tmpl .icon_style_row:hover,*/
.icon_li_row .icon_style_row:focus, .icon_li_row .icon_style_row:active {

    transform: scale(2.5) translateY(0.45rem) translatex(0.2rem); /**/

    background-color: var(--card-bg); /**/

    border-radius: 4px;

    padding: 1px;
    opacity: 1;

    z-index: 20;
}

/*===============================================================
displayColumnIcon
===============================================================*/

/* standard for all */
.icon_style_col {
    /*border: 3px solid darkgrey;*/
    /*border-radius: 4px;*/
    padding: 0.3rem;
}

ul .icon_li_col {
    list-style-type: none;

    display: flex;
    flex-direction: row;
    /*justify-content:flex-start;*/
    /*align-self: flex-start;*/
    align-items: flex-start;
}

ul .icon_style_col {
    /*align-self: flex-start;*/
}

.icon_style_icon {
    width: 50px;
    text-align: left;
}

.icon_style_name_col {
    padding: 5px;
}

.icon_li_col .icon_style_col:hover {

    transform: scale(2.5) translateY(0.45rem) translatex(0.5rem); /**/

    background-color: var(--card-bg); /**/

    border: 1px solid darkgrey;
    border-radius: 2px;

    padding: 1px;
    text-align: center;
    opacity: 1;
    z-index: 20;
}

.icon_style_col .icon_style_col:hover, .icon_li_col .icon_style_col:focus {

    transform: scale(2.5) translateY(0.45rem) translatex(0.2rem); /**/

    background-color: var(--card-bg);

    border: 1px solid darkgrey;
    border-radius: 4px;

    padding: 1px;
    text-align: center;
    opacity: 1;

    z-index: 20;
}