/**
 * Stylish UX - front-end styles
 *
 * Colours, radii etc. are supplied as CSS custom properties (written
 * into an inline <style> block by the plugin, from the admin params)
 * with sensible fallbacks here so the buttons still look reasonable
 * even if a value is ever missing.
 *
 * Selectors are qualified with the "a" tag (raising specificity above a
 * plain single-class selector such as Bootstrap's .btn/.btn-primary) and
 * the colour/radius/decoration declarations carry !important, so this
 * plugin's own styling always wins even on sites where a theme's own
 * "btn" classes weren't stripped (see the "Strip conflicting classes"
 * option) or where the theme targets links some other way.
 */

a.stylishux-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 1em;
    text-decoration: none !important;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.stylishux-btn:hover,
a.stylishux-btn:focus {
    text-decoration: none !important;
}

a.stylishux-btn .stylishux-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

a.stylishux-btn .stylishux-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

a.stylishux-btn--icon-before {
    flex-direction: row;
}

a.stylishux-btn--icon-after {
    flex-direction: row;
}

/* External link buttons */
a.stylishux-btn--ext {
    background-color: var(--stylishux-ext-bg, #0b5ed7) !important;
    color: var(--stylishux-ext-color, #fff) !important;
    border-radius: var(--stylishux-ext-radius, 4px) !important;
    border: 0 !important;
}

a.stylishux-btn--ext:hover,
a.stylishux-btn--ext:focus {
    background-color: var(--stylishux-ext-bg-hover, #0a53be) !important;
    color: var(--stylishux-ext-color, #fff) !important;
}

/* Internal link buttons */
a.stylishux-btn--int {
    background-color: var(--stylishux-int-bg, #6c757d) !important;
    color: var(--stylishux-int-color, #fff) !important;
    border-radius: var(--stylishux-int-radius, 4px) !important;
    border: 0 !important;
}

a.stylishux-btn--int:hover,
a.stylishux-btn--int:focus {
    background-color: var(--stylishux-int-bg-hover, #5a6268) !important;
    color: var(--stylishux-int-color, #fff) !important;
}

/* Downloadable-files notice */
.stylishux-filenotice {
    display: flex;
    align-items: center;
    gap: 0.6em;
    background-color: var(--stylishux-fn-bg, #fff8e1);
    color: var(--stylishux-fn-color, #664d03);
    border-radius: var(--stylishux-fn-radius, 4px);
    padding: 0.75em 1em;
    margin: 0 0 1em;
}

.stylishux-filenotice .stylishux-icon {
    width: 1.2em;
    height: 1.2em;
}