@keyframes anim-alert {
	0% { transform: scale(1) rotate(0); }
	10% { transform: scale(1.1) rotate(-10deg); }
	15% { transform: scale(1.1) rotate(10deg); }
	20% { transform: scale(1.1) rotate(-10deg); }
	50% { transform: scale(1) rotate(0); }
}

@keyframes anim-spinner {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

.connexion {

    --white : #fff;
    --grey : #ececec;
    --grey-medium : #6D777D;
    --black : #334346;
    --yellow : #fba92b;
    --red : #cb4332;
    --green : green;
    --space : 10px;
    --radius : 3px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 calc(6*var(--space));
    text-align: left;
    font-family: "Lato", Helvetica, sans-serif;
    margin-bottom: calc(6*var(--space));

    h1 {
        color: #F9B13F;
        grid-column: 1/-1;
    }
    > p {
        grid-column: 1/-1;
    }
    ul:not(.connexion-list) {
        margin: 0;
    }
    li {
        list-style: none;
        padding: 0;
    }
    a {
        color: var(--yellow);
    }
    a:hover, a:focus {
        color: var(--red);
        text-decoration: none;
    }
    .spinner {
        width: 20px;
        height: 20px;
        border: 2px solid var(--black);
        border-left-color: transparent;
        border-radius: 50%;
        animation: anim-spinner 1s infinite linear;
    }
    svg {
        display: block;
    }    
    .hidden {
        display: none;
    }
}

.connexion-msg {
    padding: calc(.5*var(--space)) var(--space);
    background-color: var(--grey-medium);
    color: var(--white);
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: var(--space);
    border-radius: var(--radius);

    &::before {
        flex-shrink: 0;
        content: "!";
        aspect-ratio: 1;
        background-color: var(--white);
        width: 20px;
        text-align: center;
        border-radius: 50%;
        font-weight: 900;
        color: var(--grey-medium);
        animation: anim-alert 1s infinite;
    }

    &.invalid {
        background-color: var(--red);
        color: var(--white);
    }
    &.invalid::before {
        color: var(--red);
    }
    &.valid {
        background-color: var(--green);
        color: var(--white);
    }
    &.valid::before {
        color: var(--green);
    }
    &:empty {
        display:none;
    }

}

.password-tooltip {
    
    .tooltip-title {
        margin: 0 0 10px;
        font-weight: 600;
    }

    .password-tooltip ul {
        margin: 0;
        padding-left: 18px;
    }

    .password-tooltip li {
        margin: 6px 0;
        text-align: left;
    }
    .invalid {
        color:var(--red);
    }
    .valid {
        color:var(--green);
    }
}

.connexion-form {
    flex-grow: 1;
    border: 2px solid var(--grey);
    margin-top: calc(2*var(--space));

    legend {
        text-transform: uppercase;
        text-align: center;
        font-family: "Montserrat", Helvetica, sans-serif;
        font-size: calc(2.6*var(--space));
        padding: calc(2*var(--space));
        margin: 0;
        background-color: var(--grey);
    }	
}
.connexion-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: calc(1.5*var(--space));
    margin: calc(2*var(--space));

    li {
        grid-column: 1/-1;
    }
    /* .connexion-list-item--department,
    .connexion-list-item--outfr {
        grid-column: span 1;
    } */
    li:has(input) {
        display: flex;
        flex-direction: column;
        gap: calc(.5*var(--space));
    }
    li:has(>ul) {
        text-align: center;
        margin-top: var(--space);
    }
    li:has([type="checkbox"]) {
        flex-direction: row;
    }
    label {
        cursor: pointer;
        font-weight: 400;
        margin: 0;
    }	
    input {
        padding: calc(.75*var(--space)) calc(1.5*var(--space));
        border: 1px solid var(--grey-medium);
        border-radius: var(--radius);
    }	
    input:not([type="checkbox"]) {
        width: 100%;
    }
    input:focus {
        border-color: var(--black);
        border-left-width: var(--space);
    }
    input + p {
        margin: 0;
        color: var(--grey-medium);
    }
    .connexion-btn {
        margin-inline: auto;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: var(--space);
        padding: var(--space) calc(4*var(--space));
        background-color: var(--yellow);
        color: var(--black);
        text-transform: uppercase;
        border-radius: var(--radius);
        transition: background-color .3s ease;
    }
    .connexion-btn:hover, .connexion-btn:focus {
        background-color: var(--grey);
        transition: background-color .3s ease;
    }
    .connexion-btn:disabled {
        background-color: transparent;	
        border: 1px solid var(--grey);
        color: var(--grey)!important;
        cursor: default;
    }
    .connexion-btn:disabled:hover, .connexion-btn:disabled:focus {
        background-color: transparent;	
    }

    div:has(.connexion-password-toggle) {
        position: relative;

        input {
            padding-right: 50px;
        }
    }
    .connexion-password-toggle {
        all: unset;
        cursor: pointer;
        position: absolute;
        inset: 50% var(--space) auto auto;
        transform: translateY(-50%);
    }
    .connexion-password-toggle:hover, .connexion-password-toggle:focus {
        background-color: transparent;
    }
    [type="text"] + button g {
        display: none;
    }
    .connexion-password-toggle:hover, .connexion-password-toggle:focus {
        svg {
            fill: var(--grey);
        }
    }
}