@import "../../style/color.pcss";
@import "../../style/theme.pcss";
@import "../../style/border.pcss";
@import "../../style/form.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss';
@import '../../style/typography.pcss';
@import '../../style/mixin/hover.pcss';

@import "../../style/control.pcss";
@import "../../style/floating-ui.pcss";

:host {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    max-width: 500px;
}

[data-monster-role="control"] {
    width: 100%;
    box-sizing: border-box;
}

monster-message-state-button {
    margin-top: 2.9rem;
}

.hidden {
    display: none !important;
}


[data-monster-role="forgot-password-link"],
[data-monster-role="reset-login-process-link"],
[data-monster-role="login-link"] {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    cursor: pointer;

    color: var(--monster-color-secondary-1);
    text-decoration: none;
    outline: none;
    transition: color 300ms ease-in-out, text-decoration-color 300ms ease-in-out;




}

a, a:link, a:visited, a:hover, a:active, a:focus {
    color: var(--monster-color-secondary-1);
    text-decoration: none;
    outline: none;
    transition: color 300ms ease-in-out, text-decoration-color 300ms ease-in-out;
}

a:hover, a:active, a:focus {
    color: var(--monster-color-primary-2);
    text-decoration: underline;
    text-decoration-color: var(--monster-color-secondary-1 );
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:focus {
    outline: 1px dashed var(--monster-color-selection-1);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {

    a, a:link, a:visited, a:hover, a:active, a:focus {
        color: var(--monster-color-amber-2);
    }

    a:focus {
        outline: 1px dashed var(--monster-color-selection-4);
    }
}


.invalid {
    position: relative;
}

.invalid::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: var(--monster-color-error-2);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 11"><defs><linearGradient id="opacityGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="150" y2="0"><stop offset="0%" stop-opacity="1"/><stop offset="50%" stop-opacity="0.5"/><stop offset="100%" stop-opacity="1"/></linearGradient><linearGradient id="widthGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="150" y2="0"><stop offset="0%" stop-color="#000" stop-opacity="1" style="stop-color: black; stop-opacity: 1"/><stop offset="50%" stop-color="#000" stop-opacity="0.3" style="stop-color: black; stop-opacity: 0.3"/><stop offset="100%" stop-color="#000" stop-opacity="1" style="stop-color: black; stop-opacity: 1"/></linearGradient></defs><path d="M0,6 C25,2 50,10 75,6 100,2 125,10 150,6" stroke="url(#opacityGradient)" stroke-width="2" fill="none" stroke-linecap="round" stroke-dasharray="url(#widthGradient)"/></svg>');
    mask-repeat: repeat-x;
    background-size: 150px auto;
}


::slotted(h1),
::slotted(h2),
::slotted(h3),
::slotted(h4),
::slotted(h5),
::slotted(h6) {
    margin-top: 0 !important;
}