/* Token HUD (right click token) */
/* Glass - Remove prior styling */

.placeable-hud,
#token-hud .attribute,
.placeable-hud input[type="text"] {
    border: none;
    border-radius: 0px;
    box-shadow: none;
    backdrop-filter: none;
    background: none;
    background-image: none;
}

/* Glass - Add new styling */

.placeable-hud .control-icon,
.placeable-hud input[type="text"] {
    border: none;
    border-radius: var(--dorako-radius);
    background-color: var(--dorako-bg-current);
    /* backdrop-filter: var(--dorako-vibrancy); */
    /*will-change: backdrop-filter;*/
    transform: translate3d(0px, 0px, 0px);
    box-shadow: var(--glassy);
}

.middle .attribute {
    display: flex;
    gap: 10px;
    align-content: space-evenly;
    justify-content: space-evenly;
}

#token-hud .attribute i.fas {
    z-index: 1;
}

#token-hud .attribute {
    flex: 0 0 40px;
}

#token-hud .attribute.elevation {
    transition: background-color 0.15s ease-out;
    position: relative;
    width: 40px;
    margin: unset;
    box-shadow: none;
}

.placeable-hud input[type="text"]:focus {
    border: none;
    transition: background-color 0.15s ease-out;
    box-shadow: var(--glassy);
}

#token-hud .attribute.elevation:hover {
    transition: background-color 0.15s ease-out;
    background-color: rgb(162, 226, 252);
}

/* #token-hud .attribute.bar1 {
    background-color: none;
    box-shadow: none;
} */

#token-hud .attribute input {
    transition: background-color 0.15s ease-out;
    border: none;
    box-shadow: var(--glassy);
    background-color: var(--dorako-bg-current);
    /* backdrop-filter: brightness(250%); */
}

/* #token-hud .attribute.bar1:hover {
    transition: background-color 0.15s ease-out;
    border: none;
    background-color: #7cd00077;
    box-shadow: var(--glassy);
} */

.placeable-hud input[type="text"] {
    border-radius: 3px;
}

#token-hud .attribute.bar1 input:hover,
.placeable-hud input[type="text"]:hover {
    /* backdrop-filter: var(--dorako-vibrancy-active); */
}



.placeable-hud input[type="text"] {
    /* width: 100%; */
    min-width: 40px;
    border: unset;
    color: var(--color-text-light-2);
    text-shadow: var(--dorako-text-shadow);
    height: 40px;
    line-height: 40px;
    margin: 0;
    /* border-radius: var(--dorako-radius); */
    font-size: var(--font-size-28);
    font-weight: bold;
    pointer-events: all;
    background: none;
}

.placeable-hud .control-icon {
    margin: 0px;
}



#token-hud .col.right {
    /* left: 100px; */
    gap: 10px;
}

#token-hud .col.left {
    gap: 10px;
    text-shadow: var(--dorako-text-shadow);
}

.placeable-hud .control-icon:not(:nth-child(2)) {
    margin: 0px;
    background-color: var(--paizo-blue-dark);
    transition: background-color 0.15s ease-out;

}

.placeable-hud .control-icon.active {
    border: unset;
    background-color: var(--paizo-blue-bright);
    transition: background-color 0.15s ease-out;

}

.placeable-hud .control-icon:not(:nth-child(2)):hover {
    transition: background-color 0.15s ease-out;
    background-color: var(--paizo-blue);
    /* backdrop-filter: var(--dorako-vibrancy-active); */
}

.placeable-hud .control-icon:nth-child(2):hover {
    transition: background-color 0.15s ease-out;
    background-color: var(--paizo-red);
    /* backdrop-filter: var(--dorako-vibrancy-active); */
}

.placeable-hud .control-icon,
.placeable-hud .control-icon img {
    opacity: 1;
    color: rgb(240, 240, 240);

}