/*
 * General styles for the blocks and lists of items
 * Don't put context-related styles here (e.g. the items inside the city),
 * put them rather in the appropriate specific CSS file.
 */
.items_list {
    display:flex;
    gap:0.7em;
    margin-left:1.5rem;
    flex-wrap:wrap;
    margin-top:0.2rem;
    padding-left:0;
    list-style-type:none;
}
.items_list img {
    text-align:center; /* Useful to center the alternative textual icon (emoji...) */
}

/*
 * The block for the icon of one item
 */
.item_label { /* Global container (icon + tooltip) */
    position:relative;
    display:flex;
    justify-content: flex-start; /* The tooltip must start at the left of the icon (not centered)*/
    align-items: center;
    height:3.3em;
    width: 3.3em;
    background:lightgrey;
    border:2px solid #f0f0f0;
    outline:1px solid rgba(0,0,0,.1);
    border-radius:0.5em;
    cursor:pointer;
}
.item_label .close {
    top:  -1em;
    right:-1em;
}
.item_label>var { /* The clickable icon of the item */
    display:flex;
    margin:auto;
    font-size:1.4em; /* Magnify the emoji icons */
    font-style:normal;
}
.item_label var::selection {
    background:none;
}

.item_label var[disabled] {
    opacity:0.3;
}
.item_label var[disabled] ~ .details form,
.item_label var[disabled] ~ .details .caracs,
.item_label var[disabled] ~ .details .descr_ambiance,
.item_label var[disabled] ~ .details .descr_purpose {
    display:none;
}

.item_label img {
    height:32px;
    width: 32px;
}
.item_label .dot_number {
    position:absolute;
    bottom:-2px;
    right: -2px;
    height:   18px;
    min-width:18px;
    padding:0 0.2em;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8em;
    font-weight:bold;
    background:aliceblue;
    /*border:1px solid darkgrey;*/
    border-radius:2px;
}
.item_label.empty_slot {
    background-color:#fafafa;
    border:1px solid lightgrey;
}

/* The tooltip for the item */
.item_label .details {
    position:absolute;
    top:3em;
    width:14.5em;
    padding:0.2em 0.3em 0.7em 0.3em;
    text-align:left;
    background:lightgrey;
    border:1px outset #34495e;
    border-radius:0.3em;
    border-top-right-radius:0;
    box-shadow:8px 8px 15px black;
    cursor:auto;
    z-index:30;
}
.item_label .details var { /* The icon & name inside the item's tooltip */
    display:flex;
    align-items: center;
    margin-top:0.3em;
    font-size:1.2em;
    font-weight:bold;
    font-style:normal;
}
.item_label .details button {
    width:100%;
}
.item_label .details .drop_button {
    height:1.8em;
}
.item_label .details .descr_ambiance {
    font-size:0.85em;
    margin:0; /*1.2em 0 0.5em 0*/
    line-height:140%;
    font-style:italic;
}
.item_label .details .descr_purpose {
    margin:0.5em auto 1em auto;
    padding:0.2em;
    line-height: 130%;
    border-radius:0.5em;
}

.item_label .details ul {
    margin-bottom:0.8em;
    padding-left:0;
}
.item_label .details li {
    display:flex;
    align-items: center;
    gap:0.4em;
    margin-bottom:0.2em;
    padding:0.1em;
    font-size:0.9em;
    background:#34495e;
    color:white;
    border-radius:1em 0.4em 0.4em 1em;
    box-shadow:4px 4px 4px grey;
}
.item_label .details li .material-icons {
    height:100%;
    padding: 0.1em;
    font-size:1.2em;
    background:#fbeee6;
    border: 1px solid white;
    border-radius:1em;
    color:black;
}

.item_label .details .type_booster .material-icons {
    background:orange;
}
.item_label .details .type_resource .material-icons {
    background:#7FB3D5;
}
.item_label .details .type_weapon .material-icons {
    background:#EC7063;
}
.item_label .details .preciousness .material-icons {
    color:#FFD700;
    -webkit-text-stroke:1px darkslategrey;
}

.item_label.precious {
    border:5px ridge #FFD700;
}
.item_label.precious::after {
    content: "★";
    position:absolute;
    top:  -14px;
    right:-11px;
    font-size:1.2em;
    color:#FFD700;
    -webkit-text-stroke: 1px darkslategrey;
}