@charset "UTF-8";
/**
* Login widget styles.
*
* Edit this .scss only — the watcher compiles the .css / .css.map companions.
*/
/* ---------------------------------------------------------------------------
* Root / trigger
* ------------------------------------------------------------------------- */
.trx-wcext-login-wrap {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
/* The trigger is a plain link, not a button (no background/border by default) */
.trx-wcext-login-trigger {
display: flex;
align-items: center;
vertical-align: middle;
gap: 8px;
cursor: pointer;
border: 0;
background: none;
padding: 0;
line-height: 1.2;
text-decoration: none;
color: inherit;
}
.trx-wcext-login-trigger:hover, .trx-wcext-login-trigger:focus {
text-decoration: none;
}
.trx-wcext-login-trigger[hidden] {
display: none;
}
.trx-wcext-login-trigger .trx-wcext-icon {
position: relative;
display: flex;
line-height: 1;
}
.trx-wcext-login-trigger .trx-wcext-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
/* "Icon Position": start / end are already the markup order, only the stacked variant needs a rule */
.trx-wcext-login-btnicon-top .trx-wcext-login-trigger {
flex-direction: column;
justify-content: center;
}
.trx-wcext-login-btnicon-end .trx-wcext-login-trigger .trx-wcext-icon {
order: 1;
}
/* Editor only: shown when both the icon and the text of the trigger are empty */
.trx-wcext-login-placeholder {
display: inline-block;
vertical-align: middle;
padding: 8px 12px;
border: 1px dashed rgba(0, 0, 0, 0.3);
opacity: 0.7;
font-size: 13px;
}
/* ---------------------------------------------------------------------------
* Panel (portaled to )
* ------------------------------------------------------------------------- */
.trx-wcext-login-panel {
position: fixed;
inset: 0;
z-index: 9999;
}
.trx-wcext-login-panel[hidden] {
display: none;
}
.trx-wcext-login-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity var(--trx-wcext-login-duration, 350ms) ease;
}
.trx-wcext-login-dialog {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: Min(var(--trx-wcext-login-width, 340px), 100vw);
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
font-size: 14px;
background-color: #fff;
padding: 30px;
transform: translateX(100%);
transition: transform var(--trx-wcext-login-duration, 350ms) ease;
overflow: hidden;
}
.trx-wcext-login-panel-pos-left .trx-wcext-login-dialog {
right: auto;
left: 0;
transform: translateX(-100%);
}
.trx-wcext-login-panel-open .trx-wcext-login-overlay {
opacity: 1;
}
.trx-wcext-login-panel-open .trx-wcext-login-dialog {
transform: translateX(0);
}
/* Header: title + close block */
.trx-wcext-login-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.trx-wcext-login-title {
margin: 0;
flex: 1 1 auto;
}
.trx-wcext-login-close {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
line-height: 1;
flex: 0 0 auto;
}
.trx-wcext-login-close .trx-wcext-icon {
display: inline-flex;
line-height: 1;
font-size: 11px;
}
.trx-wcext-login-close .trx-wcext-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.trx-wcext-login-close .trx-wcext-login-close-text {
font-size: 13px;
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* Body: the scrollable area holding the notices, the forms and the social block */
.trx-wcext-login-body {
flex: 1 1 auto;
overflow-y: auto;
display: flex;
flex-direction: column;
padding-top: 20px;
padding-left: 1px;
}
/* ---------------------------------------------------------------------------
* Views: exactly one form is visible at a time
* ------------------------------------------------------------------------- */
.trx-wcext-login-form {
display: none;
flex-wrap: wrap;
gap: 16px;
margin: 0;
align-content: flex-start;
}
.trx-wcext-login-view-login .trx-wcext-login-form-login,
.trx-wcext-login-view-register .trx-wcext-login-form-register,
.trx-wcext-login-view-lost .trx-wcext-login-form-lost {
display: flex;
}
/* A form that has done its job (the password-setup-link answer) stays out of the way */
.trx-wcext-login-panel .trx-wcext-login-form-done {
display: none;
}
/* The social block is a single node after all three forms */
.trx-wcext-login-view-lost .trx-wcext-login-social,
.trx-wcext-login-view-register .trx-wcext-login-social-login-only {
display: none;
}
/* "Above the form": the block is reordered inside the flex body */
.trx-wcext-login-social-before_form .trx-wcext-login-social {
order: -1;
}
.trx-wcext-login-social-before_form .trx-wcext-login-notices {
order: -2;
}
/* ---------------------------------------------------------------------------
* Notices
* ------------------------------------------------------------------------- */
.trx-wcext-login-notices:empty {
display: none;
}
.trx-wcext-login-notice {
padding: 12px 16px;
margin-bottom: 16px;
border-radius: 3px;
}
.trx-wcext-login-notice-error {
color: #b3261e;
background-color: rgba(179, 38, 30, 0.08);
}
.trx-wcext-login-notice-success {
color: #1e7b34;
background-color: rgba(30, 123, 52, 0.08);
}
.trx-wcext-login-notice a {
color: inherit;
}
/* ---------------------------------------------------------------------------
* Fields
* ------------------------------------------------------------------------- */
.trx-wcext-login-form-desc {
flex: 1 1 100%;
margin: 0;
}
.trx-wcext-login-field {
flex: 1 1 100%;
min-width: 0;
/* Two half-width fields share one row; flex-grow evens them out */
}
.trx-wcext-login-field-half {
flex: 1 1 40%;
}
.trx-wcext-login-field-error .trx-wcext-login-input {
border-color: #b3261e;
}
.trx-wcext-login-label {
display: block;
margin-bottom: 6px;
}
.trx-wcext-login-required {
margin-left: 2px;
}
.trx-wcext-login-field-control {
position: relative;
display: flex;
align-items: center;
}
.trx-wcext-login-input {
width: 100%;
min-width: 0;
}
/* Password show/hide */
.trx-wcext-login-eye {
position: absolute;
top: 50%;
right: var(--trx-wcext-login-eye-offset, 12px);
transform: translateY(-50%);
display: inline-flex;
align-items: center;
cursor: pointer;
line-height: 1;
}
.trx-wcext-login-eye .trx-wcext-icon {
display: inline-flex;
line-height: 1;
}
.trx-wcext-login-eye .trx-wcext-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.trx-wcext-login-eye .trx-wcext-login-eye-hide {
display: none;
}
.trx-wcext-login-eye.trx-wcext-login-eye-on .trx-wcext-login-eye-show {
display: none;
}
.trx-wcext-login-eye.trx-wcext-login-eye-on .trx-wcext-login-eye-hide {
display: inline-flex;
}
/* Reserve room for the eye so the typed password doesn't run underneath */
.trx-wcext-login-field-control-eye .trx-wcext-login-input {
padding-right: calc(var(--trx-wcext-login-eye-offset, 12px) + 1.6em);
}
/* Honeypot: present for bots, invisible (and unreachable) for everyone else */
.trx-wcext-login-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------------------------------------------------------------------------
* Checkboxes ("Remember me" + the Terms consent)
* ------------------------------------------------------------------------- */
.trx-wcext-login-form-meta {
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
font-size: 13px;
}
/**
* Structure: immediately followed by its