.login-panel {
    gap: 0.75rem;

    button {
        &.loading {
            opacity: 0.6;
            cursor: wait !important;
        }
    }

    .heading {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
        padding-bottom: 0.75rem;
        .logo {
            height: 45px;
        }
        .title {
            font-size: 2.5rem;
            font-weight: 600;
        }
    }

    .sso-actions-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        .sso-btn {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            gap: 0.5rem;
            border: 1px solid #d0d7de;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            color: #3f3f3f;
            transition: all 0.1s ease-in-out;
            .logo {
                height: 1.5rem;
                width: 1.5rem;
            }
            span {
                font-size: 0.95rem;
            }
        }
        .entra-sso-btn {
            &:hover {
                border-color: #2f2f2f;
                background-color: #2f2f2f;
                color: white;
            }
        }
    }

    .or-separator {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0.5rem;
        .or-text {
            font-size: 0.8rem;
        }
        .or-line {
            flex-grow: 1;
            height: 1px;
            background-color: var(--card-border-color);
        }
    }

    .username-password-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        .input-container {
            display: flex;
            flex-direction: column;
            width: min(100%, 300px);

            label {
                font-weight: 500;
                font-size: 0.9rem;
            }
            input {
                width: 100%;
                padding: 0.5rem 0.75rem;
                border: 1px solid #d0d7de;
                border-radius: 8px;
                font-size: 1rem;
                background: #fff;
                transition:
                    border-color 0.15s ease,
                    box-shadow 0.15s ease;
                &:focus {
                    outline: none;
                    border-color: #0067c0;
                    box-shadow: 0 0 0 3px rgba(0, 103, 192, 0.15);
                }
            }

            .password-container {
                position: relative;
                input {
                    width: 100%;
                    padding-right: 3rem;
                }
                .toggle-password-visibility {
                    position: absolute;
                    right: 0.75rem;
                    top: 50%;
                    transform: translateY(-50%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: none;
                    background: transparent;
                    color: #6c757d;
                    cursor: pointer;
                    &:hover {
                        color: #0067c0;
                    }
                }
                .password-icon {
                    font-size: 1.25rem;
                }
            }
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;

            .forgot-actions {
                display: flex;
                gap: 1rem;
                width: 100%;
                justify-content: center;

                a {
                    background: transparent;
                    border: none;
                    color: #0067c0;
                    padding: 0;
                    font-size: 0.8rem;
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            #login-submit {
                margin: auto;
                padding: 0.5rem 1.5rem;
                border: none;
                border-radius: 8px;
                background: #0067c0;
                color: white;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.15s ease;

                &:hover {
                    background: #005aab;
                }
                &:active {
                    transform: translateY(1px);
                }
            }
        }
    }
}