/* Hotbar (Macro bar) */

/* Glass - Remove prior styling */

#hotbar #macro-list,
#hotbar .bar-controls,
#hotbar #macro-list,
#hotbar .macro.inactive,
#hotbar .macro {
    border: none;
    border-radius: 0px;
    box-shadow: none;
    backdrop-filter: none;
    background: none;
    background-image: none;
}

/* Glass - Add new styling */

#hotbar #hotbar-directory-controls,
#hotbar #hotbar-page-controls,
#hotbar #macro-list,
#hotbar .macro.inactive,
#hotbar .macro:not(.active) {
    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);
}

#hotbar .bar-controls span.page-number {
    text-shadow: var(--dorako-text-shadow);
}

#hotbar .macro .macro-key,
#custom-hotbar .macro .custom-macro-key {
    background: none;
    /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
    text-shadow: 0px 0px 15px black, 0px 0px 14px black, 0px 0px 13px black, 0px 0px 12px black, 0px 0px 11px black, 0px 0px 10px black, -1px -1px 3px black, -1px 0px 3px black, -1px 1px 3px black, 0px -1px 3px black, 0px 0px 3px black, 0px 1px 3px black, 1px -1px 3px black, 1px 0px 3px black, 1px 1px 3px black;
    /* text-shadow: var(--dorako-text-shadow); */
    font-size: large;
}

#hotbar .bar-controls a.page-control {
    font-size: var(--font-size-14);
}

#context-menu.expand-up {
    bottom: calc(100% + 2px);
}

#context-menu.expand-up .expand-down {
    bottom: calc(100% + 2px);
}

#hotbar .macro.active:hover {
    border: unset;
}

#hotbar .macro:hover {
    box-shadow: var(--glassy);
}

#hotbar .macro .macro-icon {
    height: unset;
    width: unset;
}


#hotbar .macro.inactive {
    transition: background 0.15s ease-out;
    background: var(--dorako-bg-current);
}

#hotbar .macro.inactive:hover {
    transition: background 0.15s ease-out;
    border: none;
    box-shadow: var(--glassy);
    background: var(--paizo-red);
}

#hotbar .macro.active {
    transition: background 0.15s ease-out;
    background-color: var(--paizo-blue-dark);
}

#hotbar .macro.active:hover {
    transition: background 0.15s ease-out;
    transition: box-shadow 0.15s ease-out;
    background-color: var(--paizo-blue-bright);
}



#hotbar {
    width: auto;
    gap: 10px;
    bottom: 0px;
    left: 0px;
    margin-bottom: var(--edge-margin);
    flex-grow: 0;
}

#hotbar-page-controls .bar-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

#hotbar .bar-controls span.page-number {
    font-size: unset;
    line-height: unset;
}

#hotbar .fas {
    text-shadow: var(--dorako-text-shadow);
}

#hotbar .bar-controls {
    flex: 0 0 22px;
    height: auto;
    margin: 0px;
}

#hotbar #action-bar {
    flex: 1;
    height: 100%;
    pointer-events: all;
    gap: 10px
}

#hotbar #macro-list {
    background-color: var(--dorako-bg-current);
    padding: 5px;
    gap: 5px;
    margin: 0px;
    /* backdrop-filter: var(--dorako-vibrancy); */
    flex: 1;
}

#hotbar .macrolist {
    gap: 10px;
}

/* .sheet header.sheet-header img {
    flex: 0 0 50px;
    height: 50px;
    margin-right: 0px;
    box-shadow: var(--glassy);
    background-color: var(--paizo-blue-dark);
} */

#hotbar .macro.active::before {
    transition: box-shadow 0.5s ease-in-out;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--glassy);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

#hotbar .macro.active:hover::before {
    transition: box-shadow 0.5s ease-in-out;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgba(220, 200, 100, 0.5) inset, var(--glassy);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

/* Thin hotbar */

#hotbar #macro-list {
    box-shadow: none;
    background: none;
    padding: 0px;
    gap: 2px;
    margin: 0px;
    flex: 1;
}

/* Monk's hotbar */
.hotbar-page {
    position: absolute;
    bottom: 52px;
    width: 592px;
    /* left: -32px; */
    transition: unset;
    gap: 2px;
    z-index: -1;
    max-height: 270px;
    overflow: visible;
}

#hotbar .macro-list {
    margin: 0px;
}

.hotbar-page-row {
    gap: 9px
}

.hotbar-page .action-bar {
    display: contents;
}

.hotbar-page .macro-list {
    flex: 0 0 518px;
    height: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
    border-radius: 3px;
    gap: 2px;
}

.hotbar-page.opening {
    overflow: visible;
}

#hotbar .hotbar-page .bar-controls span.page-number,
#hotbar .hotbar-page .bar-controls i {
    box-shadow: var(--glassy);
    background-color: var(--dorako-bg-current);
    border-radius: 3px;
}

#hotbar {
    height: unset;
}

/* Hotbar */
#ui-bottom {
    /* margin-left: 9px; */
    margin-left: var(--hotbar-margin-left);
}

/* Minimal UI */
#hotbar:hover {
    bottom: 0px;
    margin-bottom: var(--edge-margin);
}

#hotbar #macro-list:hover {
    border-top: none;
    box-shadow: none;
    transition: unset;
}