/**
 * Stylish UX - front-end styles
 *
 * Colours and per-corner radii (-tl, -tr, -br, -bl) 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-tl, 4px) var(--stylishux-ext-radius-tr, 4px) var(--stylishux-ext-radius-br, 4px) var(--stylishux-ext-radius-bl, 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-hover, 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-tl, 4px) var(--stylishux-int-radius-tr, 4px) var(--stylishux-int-radius-br, 4px) var(--stylishux-int-radius-bl, 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-hover, 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-tl, 4px) var(--stylishux-fn-radius-tr, 4px) var(--stylishux-fn-radius-br, 4px) var(--stylishux-fn-radius-bl, 4px);
    padding: 0.75em 1em;
    margin: 0 0 1em;
}

.stylishux-filenotice:hover {
    color: var(--stylishux-fn-color-hover, var(--stylishux-fn-color, #664d03));
}

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

/* Inline external links (links inside sentences) */
a.aio-link-ext {
    color: var(--aio-lx-color) !important;
    font-weight: var(--aio-lx-weight) !important;
    text-decoration-line: var(--aio-lx-line) !important;
    text-decoration-style: var(--aio-lx-style) !important;
    text-decoration-thickness: var(--aio-lx-thick) !important;
    text-underline-offset: var(--aio-lx-offset) !important;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a.aio-link-ext:hover,
a.aio-link-ext:focus-visible {
    color: var(--aio-lx-color-h) !important;
    text-decoration-line: var(--aio-lx-line-h) !important;
    text-decoration-style: var(--aio-lx-style-h) !important;
}

/* Inline internal links (links inside sentences) */
a.aio-link-int {
    color: var(--aio-li-color) !important;
    font-weight: var(--aio-li-weight) !important;
    text-decoration-line: var(--aio-li-line) !important;
    text-decoration-style: var(--aio-li-style) !important;
    text-decoration-thickness: var(--aio-li-thick) !important;
    text-underline-offset: var(--aio-li-offset) !important;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a.aio-link-int:hover,
a.aio-link-int:focus-visible {
    color: var(--aio-li-color-h) !important;
    text-decoration-line: var(--aio-li-line-h) !important;
    text-decoration-style: var(--aio-li-style-h) !important;
}