/* 
    UserScript UI
    -- made by CCN0 -- https://usui.qog.app/ -- https://github.com/ccn0/usui/ --
    version 0.030beta
*/

.USUI_popup_T_DEFAULT {
    --bodycolor: #ffffff;
    --textcolor: #000000;
    --popupfont: sans-serif;
    --popuplineheight: 24.5px;
    --popupshadow: #00000050 2px 2px 15px;
    --popupborder: 1px solid #000;
    --popupradius: 0 12px 12px 12px;
    --titlebarbg: #666666;
    --titlebarcolor: #ffffff;
    --btnbgcolor: #e9e9ed;
    --btnbgcoloractive: #aaaaaa;
    --btncolor: #000000;
    --btnborder: 2px outset #aaaaaa;
    --btnborderactive: 2px inset #aaaaaa;
    --disabledtext: solid line-through 2px;
    --defaultpopupzindex: 400;
    --defaulttop: 60px;
    --defaultleft: 80px;
    --defaultwidth: 480px;
    --titlebarheight: 25.5px;
}

.USUI_popup {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: var(--defaultpopupzindex);
    line-height: var(--popuplineheight);
    width: var(--defaultwidth);
    height: auto;
    border: var(--popupborder);
    border-radius: var(--popupradius);
    overflow: hidden;
    position: fixed;
    top: var(--defaulttop);
    left: var(--defaultleft);
    background-color: var(--bodycolor);
    box-shadow: var(--popupshadow);
    font-family: var(--popupfont);
}

.USUI_textcolor {
    color: var(--textcolor);
}

.USUI_popuptitlebar {
    display: flex;
    border-bottom: var(--popupborder);
    background-color: var(--titlebarbg);
    user-select: none;
    flex-shrink: 0;
    min-height: var(--titlebarheight);
    flex-wrap: wrap;
}

.USUI_titlebarbutton {
    padding: 5px;
    min-height: var(--titlebarheight);
    line-height: 0.5rem;
    border: var(--btnborder);
    &:active {
        border: var(--btnborderactive);
    }
}

.USUI_popupcontent {
    display: block;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
}

.USUI_popupitem {
    width: 100%;
    border-bottom: 1px solid #aaa;
    display: flex;
    background-color: #fcfcfc;
}

.USUI_titlespan {
    font-size: 14px;
    margin: 0 5px;
    color: var(--titlebarcolor);
    font-weight: bold;
}

.USUI_button,
.USUI_fibutton::file-selector-button {
    font-size: 14px;
    cursor: pointer;
    font-family: sans-serif;
    text-align: center;
    align-content: center;
    background-color: var(--btnbgcolor);
    border: var(--btnborder);
    color: var(--btncolor);
    &:active,
    &:has(img:active) {
        border: var(--btnborderactive);
        background-color: var(--btnbgcoloractive);
    }
    &[disabled] {
        text-decoration: var(--disabledtext);
    }
}

.USUI_dropdown {
	position: fixed;
	width: max-content;
	height: min-content;
	display: inline-flex;
	flex-wrap: wrap;
    flex-direction: column;
    button {
        width: 100%;
        text-align: left;
    }
}

.USUI_M_prompt {
    position: fixed;
    top:0px;
    left:0px;
    padding: 8px;
    width: auto;
    height: auto;
    background-color: #ffffff;
    border: 2px outset #aaa;
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.USUI_M_colorInput {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    float: none;
    z-index: auto;
    width: 64px;
    height: 32px;
    position: static;
    padding: 5px;
    border: 1px solid #8f8f9d;
    background-color: #e9e9ed;
    border-radius: 4px;
    align-content: center;
    .USUI_M_colorInput_chip {
        box-sizing: border-box;
        background-color: #000000;
        border: 1px solid #808080;
        width: 100%;
        height: 100%;
    }
    &:hover {
        background-color: #d0d0d7;
        border-color: #676774;
        &:active {
            background-color: #b1b1b9;
            border-color: #484851;
        }
    }
}

.USUI_M_bbContainer {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    min-height: 32px;
    flex: 0 0 auto;
    &:not(:last-child) {
        margin-bottom: 2px;
    }
}

.USUI_M_bbContRange {
    height: 48px;
}

.USUI_M_bbButtons {
    max-width: 100%;
    gap:2px;
    button {
        flex: 1;
    }
}
.USUI_M_bbLabel,
.USUI_M_bbInput {
    align-content: center;
    flex: 1;
}

.USUI_M_bbLabel {
    color: var(--textcolor);
}

.USUI_M_bbInput[type="range"] {
    margin:0;
}

.USUI_M_bbTickInCont {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.USUI_M_bbTickCont {
    color: var(--textcolor);
    display: flex;
    max-height: 24px;
    flex: 1;
    font-size: 100%;
    user-select: none;
    align-content: center;
    justify-content: space-between;
    margin: 0 10px;
}

.USUI_M_bbTick {
    width: 0px;
    color: var(--textcolor);
    font-size: 100%;
    position: relative;
}
.USUI_M_bbTick_set {
    cursor: pointer;
    &:hover {
        font-weight: bold;
    }
}

.USUI_M_bbTick span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.USUI_M_bbRangeTooltip, .USUI_M_bbRangeTooltipInput {
    z-index: 10000;
    background-color: var(--bodycolor);
    padding: 4px;
    max-height: 24px;
    border: var(--btnborder);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.USUI_M_bbRangeTooltip {
    user-select: none;
    pointer-events: none;
    line-height: 0.8;
}

.USUI_M_bbRangeTooltipInput {
    line-height: 0.8;
    &:focus-within {
        display: block!important;
    }
}

.USUI_M_bbTextCont {
    text-align: center;
    align-items: center;
    p,h1,h2,h3,h4,h5,h6,ul,ol,table {
        line-height: 1;
    }
    hr {
        height: 0px;
    }
    img {
        max-width: 100%;
    }
}

.USUI_M_bbText {
    margin: 0;
    flex: 1;
}

.USUI_M_bbRowCont {
    display: flex;
    min-height: 32px;
    &>* {
        flex: 1 1 auto;
    }
    &>.USUI_M_bbContainer {
        margin-bottom: 0;
    }
}

.USUI_M_collapse {
    flex: 0 0 auto;
}

.USUI_popup_T_defaultdark {
    --bodycolor: #000000;
    --textcolor: #ffffff;
    --popupshadow: #00000050 2px 2px 15px;
    --popupborder: 1px solid #353535;
    --titlebarbg: #666666;
    --titlebarcolor: #ffffff;
    --btnbgcolor: #6b6b8a;
    --btnbgcoloractive: #333347;
    --btncolor: #ffffff;
    --btnborder: 2px outset #565565;
    --btnborderactive: 2px inset #4e4e4e;
    --disabledtext: solid line-through 2px;
    scrollbar-color: #676768 #111;
}