/*
 * The button presets live in the theme stylesheet, which the editor canvas does
 * not load. Importing the component here — rather than from editor.css — is what
 * gets them into the canvas, because WordPress injects a block's `style` handle
 * into the editor iframe while `editor_style` stays in the parent document.
 *
 * On the front end main.css already imports the same file, so this is a duplicate
 * parse of ~5 KB (one network request, it is the same URL). Cheap, but if it ever
 * matters the tidy fix is to register buttons.css as its own handle and list it in
 * the block's style_dependencies instead.
 */
@import url('../../../../assets/css/components/buttons.css');

/**
 * Town Hall V2 Button
 *
 * Colours, padding and hover behaviour come from the presets in
 * assets/css/components/buttons.css — only what those presets do not cover lives
 * here: wrapper alignment, responsive margins, the desktop font size and the
 * display toggles.
 */

.th-button {
    display: block;
    width: 100%;
    margin-top: var(--th-button-mobile-margin-top, 0);
    margin-bottom: var(--th-button-mobile-margin-bottom, 0);
}

.th-button--left {
    text-align: left;
}

.th-button--center {
    text-align: center;
}

.th-button--right {
    text-align: right;
}

/* Hidden on mobile; the desktop query below puts it back. */
.th-button--hide-mobile {
    display: none;
}

@media only screen and (min-width: 992px) {
    .th-button {
        margin-top: var(--th-button-margin-top, 0);
        margin-bottom: var(--th-button-margin-bottom, 0);
    }

    /*
     * buttons.css only ever sets --mobile-font-size on .button, so the desktop
     * size needs its own rule. Two classes, to outrank the single-class .button.
     */
    .th-button .th-button__link {
        font-size: var(--th-button-font-size, 16px);
    }

    .th-button--hide-mobile {
        display: block;
    }

    .th-button--hide-desktop {
        display: none;
    }
}