@use '../base/variables' as *;

// ==========================================================================
// Button component
//
// Named `.link-btn` (not `.btn` — that name is already taken by
// base/_utilities.scss and admin/_common.scss for the admin UI's generic
// button, and colliding with it silently strips these styles via cascade).
//
// Base `.link-btn` + design modifiers (`.link-btn--lined`, ...). Source of
// truth for the "lined" design is `coming-soon__hero__content__cta-button`
// (Figma). Colors are exposed as CSS custom properties so the same modifier
// can be reused on both dark and light backgrounds — override `--btn-*` on a
// context modifier (e.g. `.link-btn--on-light`) or inline via
// `style="--btn-color: ..."`.
// ==========================================================================

.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: $font-family-sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: all 0.3s ease;

    svg {
        fill: currentColor;
    }

    // Modifier: icon color pinned to the button's base color, ignoring
    // hover/focus text-color changes (e.g. footer social icons where only
    // the border ticks should react on hover, not the pictogram).
    &.link-btn--icon-static svg {
        color: var(--btn-color);
    }

    // Edit-mode placeholder shown when the button has no label yet (see HrefEditor's
    // combined label+href modal) — not a real button until both fields are filled.
    .link-btn__label.is-empty {
        opacity: 0.5;
        font-style: italic;
    }
}

// --------------------------------------------------------------------------
// .link-btn--lined — top/bottom rule with tick marks extending past each side
// --------------------------------------------------------------------------

.link-btn--lined {
    --btn-color: #{$color-primary-lighter};
    --btn-text: #{$color-light};
    --btn-color-hover: #{$color-light};
    --btn-text-hover: #{$color-light};

    --padding-y: 20px;
    --padding-x: 20px;

    position: relative;
    justify-content: center;
    padding: var(--padding-y) var(--padding-x);
    color: var(--btn-text);

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
    }

    &::before {
        height: 100%;
        width: calc(100% - #{var(--padding-x)});
        border-left: 1px solid var(--btn-color);
        border-right: 1px solid var(--btn-color);
    }

    &::after {
        width: 100%;
        height: calc(100% - #{var(--padding-y)});
        border-top: 1px solid var(--btn-color);
        border-bottom: 1px solid var(--btn-color);
    }

    &:hover {
        color: var(--btn-text-hover);

        &::before,
        &::after {
            border-color: var(--btn-color-hover);
        }

        &::before {
            height: calc(100% - #{var(--padding-y)});
        }

        &::after {
            width: calc(100% - #{var(--padding-x)});
        }
    }
}

// Context modifier: light backgrounds (e.g. site header on $color-neutral)
.link-btn--on-light {
    --btn-color: #{$color-primary-lighter};
    --btn-text: #{$color-primary-dark};
    --btn-color-hover: #{$color-primary-lighter};
    --btn-text-hover: #{$color-primary};
}

// Context modifier: content blocks (e.g. actualité text blocks)
.link-btn--on-content {
    --btn-color: #{$color-primary-lighter};
    --btn-text: #{$color-primary-dark};
    --btn-color-hover: #{$color-primary-lighter};
    --btn-text-hover: #{$color-primary-dark};
}