:root {
  // NOTE: You can check all CSS variable when you start typing the following in the CSS code editor: --sty
  --sty-primary-color: #db3725; // Override primary color manually
  --sty-danger-color: #b21f13; // Override danger/error color
  --sty-text-color: #001823; // Override text color
  --sty-link-color: var(--sty-text-color); // Override link color
  --sty-link-decoration: underline;// Override link text decoration style
  --sty-link-hover-color: var(--sty-primary-color); // Override link hover state color
  --sty-link-hover-decoration: underline; // Override link hover state text decoration style
}

#app.login.registration { ... } // If you want to modify registration block design
#app.login [data-section="panelHeader"] { ... } // If you want to modify the login panel header design
#app.login:not(.identifier) [data-section="panelContainer"] { ... } // If you want to modify the login panel container if the current block is not the identifier

sty-input-phone[focused],
sty-input-text[focused],
sty-input-textarea[focused],
sty-select[focused] {
  // Update input-* focused state box shadow
  --sty-input-box-shadow: ...;
}

/**
 * Login "block-ready" event.
 * Fires on every login block change.
 *
 * @event block-ready
 * @property {BlockReadyEvent} event
 */
document.addEventListener('block-ready', (event) => {
	if (event.detail.state.activeBlock === 'identifier') {
		// Do something
	}
});
/**
 *  @typedef {Object} BlockReadyEvent
 *
 *  @property {BlockReadyDetail} detail - CustomEvent detail object.
 */
/**
 *  @typedef {Object} BlockReadyDetail
 *
 *  @property {State} state - Current state.
 *  @property {State} previousState - Previous state.
 */
/**
 *  @typedef {Object} State
 *
 *  @property {string} activeBlock - activeBlock value of state.
 *  @property {Object.<string, Object>} blocks - Stores the state blocks and their data.
 *  @property {Object.<string, Object>} formValues - Stores the previous or actual state form values.
 *  @property {Object.<string, Message>} messages - Stores the global or field specific messages.
 *  @property {Account} account - Stores the login identified account information.
 *  @property {Organization} organization - Stores the login identified organization information.
 */
/**
 *  @typedef {Object} Message
 *
 *  @property {string} text - Text of the message.
 *  @property {string} type - Type of the message. (Possible values: error, info)
 */
/**
 *  @typedef {Object} Account
 *
 *  @property {string} identifier - Identified account. (Email or username)
 */
/**
 *  @typedef {Object} Organization
 *
 *  @property {string} name - Identified organization name.
 */

/**
 * Login "block-request" event.
 * Fires on every login block request.
 *
 * @event block-request
 * @property {BlockRequestEvent} event
 */
document.addEventListener('block-request', (event) => {
	if (event.detail.previousState.activeBlock === 'identifier') {
		// Do something if an identifier block request response is returned
	}
});
/**
 *  @typedef {Object} BlockRequestEvent
 *
 *  @property {BlockRequestDetail} detail - CustomEvent detail object.
 */
/**
 *  @typedef {Object} BlockRequestDetail
 *
 *  @property {State} state - Current state.
 *  @property {State} previousState - Previous state.
 *  @property {string} block - Name of the block that started the request.
 *  @property {Object} request - Request data.
 *  @property {Object} response - Response to the request.
 */
/**
 *  @typedef {Object} State
 *
 *  @property {string} activeBlock - activeBlock value of state.
 *  @property {Object.<string, Object>} blocks - Stores the state blocks and their data.
 *  @property {Object.<string, Object>} formValues - Stores the previous or actual state form values.
 *  @property {Object.<string, Message>} messages - Stores the global or field specific messages.
 *  @property {Account} account - Stores the login identified account information.
 *  @property {Organization} organization - Stores the login identified organization information.
 */
/**
 *  @typedef {Object} Message
 *
 *  @property {string} text - Text of the message.
 *  @property {string} type - Type of the message. (Possible values: error, info)
 */
/**
 *  @typedef {Object} Account
 *
 *  @property {string} identifier - Identified account. (Email or username)
 */
/**
 *  @typedef {Object} Organization
 *
 *  @property {string} name - Identified organization name.
 */