/*
 * Badge creator: an Octane extra with no AIR layout. It keeps its own layout and
 * takes the AIR text conventions: regular (not condensed) Ubuntu, u_regular 12 px
 * text, u_bold 12 px headings and 12 px regular buttons. Our `Ubuntu` face is the
 * condensed cut, so the window names the regular one.
 */
.octane-badge-creator {
    font-family: HabboAirUbuntu, UbuntuRegular, sans-serif;
}

/* Base layer + !important: Button sets its size with an important utility
   (`text-[.7875rem]!`), which only an important rule in an earlier layer beats. */
@layer base {
    .octane-badge-creator :where(*):not(svg, svg *) {
        font-family: HabboAirUbuntu, UbuntuRegular, sans-serif !important;
    }

    .octane-badge-creator__content :where(*):not(svg, svg *) {
        font-size: 12px !important;
        line-height: 16px;
    }

    .octane-badge-creator__content button {
        font-weight: 400 !important;
    }

    .octane-badge-creator__content input {
        line-height: 16px !important;
    }

    /* The tool, grid, cancel and edit buttons take AIR's grey `button` style 3 (habbo_skin_button_shiny) with
       black captions; the selected tool shows the pressed skin. Create badge spends credits, so it keeps the
       green buy skin, and Clear / Delete keep the red one. */
    .octane-badge-creator__content .habbo-btn-secondary {
        border-width: 5px !important;
        border-image-source: var(--habbo-skin-shiny) !important;
        border-image-slice: 5 fill !important;
        border-image-width: 5px !important;
        color: #000000 !important;
    }

    .octane-badge-creator__content .habbo-btn-secondary:hover {
        border-image-source: var(--habbo-skin-shiny-hover) !important;
    }

    .octane-badge-creator__content .habbo-btn-secondary:is(:active, .active) {
        border-image-source: var(--habbo-skin-shiny-pressed) !important;
    }

    .octane-badge-creator__content .habbo-btn-secondary:is(:disabled, .pointer-events-none) {
        border-image-source: var(--habbo-skin-shiny-disabled) !important;
        color: #777777 !important;
    }
}