:root {
    --md-sys-color-primary: #ffafd4;
}

a {
    color: var(--md-sys-color-primary);
}

button {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    padding: 0.4rem 0.5rem;
    border-radius: 0.4rem;
    border: none;
    outline: none;
    cursor: pointer;
    border: 1px solid var(--md-sys-color-outline);
    &:hover {
        opacity: 0.8;
    }
    &.secondary {
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
    }
}
input {
    background-image: none !important;
    padding: 0.5rem 0.3rem;
    border-radius: 0.4rem;
}
input:is(:autofill) {
    /* background-clip: text; */
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
  }
body main input {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border: 1px solid var(--md-sys-color-outline);
}

form {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
}
.login-helper {
    display: flex;
    flex-direction: row;
    gap: var(--wa-space-s);
    * {
        box-sizing: border-box;
        flex: 0 1 50%;
    }
}
wa-popover::part(body) {
    padding: var(--wa-space-s)
}